Available Components

Click on any component below to view its detailed documentation, examples, and specifications.

Form Components

• Buttons - Interactive elements that trigger actions or navigate users
• Input Fields - Text fields for capturing user data in forms
• Selection Controls - Checkboxes, radios, and toggles for user selections

Display Components

• Badges - Status indicators and labels for counts or notifications
• Avatars - Visual representations of users with images or initials
• Progress - Visual indicators for task completion and loading states
• Chips & Tags - Compact elements for categories, filters, and selections

Navigation Components

• Tabs - Navigation for organizing content into separate views
• Tooltips - Contextual information on hover or focus

Layout Components

• Toolbar - Action containers with buttons and controls
• Attachments - File upload with drag & drop support

CSS Guidelines

• Never target HTML elements directly: Always use classes for styling
• Use BEM naming: Follow the .block__element--modifier pattern
• Prefer CSS variables: Use design tokens instead of hardcoded values
• Avoid !important: Structure CSS to avoid specificity issues
• Mobile-first approach: Design for mobile, then enhance for larger screens

JavaScript Guidelines

• Prefix JS classes: Use js- prefix for JavaScript-specific classes
• Use data attributes: For storing component state or configuration
• Keep functions small: Break functions into reusable pieces (max 20 lines)
• Prefix jQuery variables: Use $ prefix for jQuery objects
• Event delegation: Use event delegation for dynamic content

Accessibility Guidelines

• Semantic HTML: Use appropriate HTML elements (<button>, <nav>, etc.)
• ARIA labels: Add aria-label for icon-only buttons
• Keyboard navigation: Ensure all interactive elements are keyboard accessible
• Color contrast: Maintain WCAG AA contrast ratios (4.5:1 for text)
• Focus indicators: Never remove focus outlines without providing alternatives

Performance Guidelines

• Minimize reflows: Batch DOM changes when possible
• Use CSS transitions: Prefer CSS over JavaScript animations
• Lazy load images: Use loading="lazy" for images
• Debounce/throttle: Use debouncing for resize/scroll events
• Async scripts: Load non-critical scripts asynchronously

Documentation

• palette View Design Primitives - Colors, Spacing, Typography
• grid_view Browse All Components - Interactive Examples

External Resources

• open_in_new BEM Methodology - Official Documentation
• open_in_new CSS Custom Properties - MDN Documentation
• open_in_new WCAG Guidelines - Accessibility Reference
• open_in_new Material Symbols - Icon Library

Download Assets

Access component CSS and design tokens for your projects.

• download Download Component CSS - Complete stylesheet
• download Download Design Tokens - CSS variables file

Usage Guidelines

Badges are used to display small pieces of information like counts, statuses, or labels. They should be concise and easy to scan.

When to Use

• Displaying notification counts
• Showing status indicators
• Labeling items with categories or types
• Highlighting new or important information

Best Practices

• Keep badge text short (ideally under 3 characters for counts)
• Use appropriate color variants to convey meaning
• Don't overuse badges - they lose impact when too common
• Consider using "+99" for counts over 99

HTML Structure

<span class="ba-badge ba-badge--[variant] ba-badge--[size]">
	Content
</span>

Available Variants

Usage Guidelines

Buttons trigger actions or navigate users. They should have clear, action-oriented labels that describe what will happen when clicked.

Button Hierarchy

• Primary: Use for the main action on a page (one per section)
• Secondary: Use for secondary actions that support the primary action
• Tertiary: Use for low-emphasis actions like "Cancel" or tertiary options

When to Use

• Submitting forms
• Triggering actions (Save, Delete, Submit, etc.)
• Opening modals or dialogs
• Navigation to different pages or sections

Best Practices

• Use clear, action-oriented labels (e.g., "Save Changes" not "OK")
• Limit to one primary button per section
• Place the primary action on the right in button groups
• Use icons to reinforce button meaning, not replace text
• Ensure sufficient touch target size (minimum 44x44px for mobile)
• Provide visual feedback on hover, focus, and active states

HTML Structure

<!-- Basic button -->
<button class="ba-btn ba-btn--[variant] ba-btn--[size]">
	Button Text
</button>

<!-- Button with icon -->
<button class="ba-btn ba-btn--[variant]">
	<i class="material-symbols-rounded">icon_name</i>
	<span>Button Text</span>
</button>

<!-- Icon-only button -->
<button class="ba-btn ba-btn--[variant] ba-btn--icon" title="Description">
	<i class="material-symbols-rounded">icon_name</i>
</button>

Available Variants

Accessibility

• Always include descriptive text for screen readers
• For icon-only buttons, use title or aria-label attributes
• Maintain proper keyboard focus order
• Ensure sufficient color contrast (WCAG AA minimum 4.5:1)
• Use disabled attribute, not just visual styling

Usage Guidelines

Progress indicators inform users about the status of ongoing processes, such as loading, uploading, or task completion.

Progress Types

• Linear Progress: Best for showing completion percentage or steps
• Circular Progress: Good for compact spaces or dashboard metrics
• Spinner: Use for indeterminate loading states
• Animated Progress: Enhanced visual feedback with various animation effects

Animation Types

• Indeterminate: Sliding bar for unknown duration (class: ba-progress--indeterminate)
• Striped: Bootstrap-style diagonal stripes (class: ba-progress--striped ba-progress--animated)
• Pulse: Pulsing opacity effect for ongoing tasks (class: ba-progress--pulse)
• Gradient: Flowing gradient animation (class: ba-progress--gradient)
• Glow: Pulsing glow effect for emphasis (class: ba-progress--glow)
• Smooth: Smooth transitions for JavaScript-controlled updates (class: ba-progress--smooth)
• Dynamic: Color-changing based on percentage (class: ba-progress--dynamic)

When to Use

• File uploads or downloads
• Multi-step forms or wizards
• Loading data or content
• Task completion tracking
• Dashboard metrics and KPIs
• Real-time data processing
• Long-running operations

Best Practices

• Use determinate progress (percentage) when duration is known
• Use indeterminate progress (spinner) when duration is unknown
• Show percentage labels for clarity when space allows
• Use color variants to indicate status (success, warning, danger)
• Provide text context above or below the progress indicator
• Update progress smoothly, avoid jumping values
• Consider animation duration - not too fast or too slow
• Use striped animation for active processes
• Use pulse for waiting states
• Use dynamic colors to provide immediate visual feedback on progress health

Color Variants

• Primary: Default progress color
• Success: Completed or successful progress
• Warning: Progress requiring attention
• Error/Danger: Critical or failed progress

HTML Structure

<!-- Linear progress bar -->
<div class="ba-progress ba-progress--[variant]">
	<span class="ba-progress__bar" style="width: [percentage]%">
		<span class="ba-progress__label">[percentage]%</span>
	</span>
</div>

<!-- Variants: leave empty for primary, or use --success, --warning, --error -->

<!-- Circular progress -->
<div class="ba-circular ba-circular--[size]">
	<svg class="ba-circular__svg" viewBox="0 0 120 120">
		<circle class="ba-circular__track" cx="60" cy="60" r="54"></circle>
		<circle class="ba-circular__bar" cx="60" cy="60" r="54"></circle>
	</svg>
	<div class="ba-circular__label">[percentage]%</div>
</div>

<!-- Loading spinner -->
<div class="ba-spinner ba-spinner--[size]"></div>

JavaScript Example

// Update linear progress
function updateProgress(percentage) {
	var $bar = $('.ba-progress__bar');
	$bar.css('width', percentage + '%');
	$bar.find('.ba-progress__label').text(percentage + '%');
}

// Update circular progress
function updateCircularProgress(percentage) {
	var radius = 54;
	var circumference = 2 * Math.PI * radius; // 339.292
	var offset = circumference - (percentage / 100 * circumference);

	$('.ba-circular__bar').css({
		'stroke-dasharray': circumference,
		'stroke-dashoffset': offset
	});
	$('.ba-circular__label').text(percentage + '%');
}

// Show/hide spinner
$('.ba-spinner').show(); // Show loading
$('.ba-spinner').hide(); // Hide when complete

Accessibility

• Use role="progressbar" for progress indicators
• Include aria-valuenow, aria-valuemin, and aria-valuemax
• Add aria-label to describe what is progressing
• For spinners, use aria-live="polite" to announce completion
• Provide text alternatives for screen readers

<div class="ba-progress"
	role="progressbar"
	aria-valuenow="60"
	aria-valuemin="0"
	aria-valuemax="100"
	aria-label="Upload progress">
	<span class="ba-progress__bar" style="width: 60%">
		<span class="ba-progress__label">60%</span>
	</span>
</div>

Usage Guidelines

Input fields are used to capture user data in forms and interfaces. They should be clear, accessible, and provide appropriate feedback.

Input Types

• Text: General text input (name, address, etc.)
• Email: Email address with validation
• Password: Secure password entry
• Number: Numeric input with increment/decrement
• Search: Search queries with icon
• Textarea: Multi-line text entry

When to Use

• User registration and login forms
• Data entry and editing
• Search functionality
• Filter controls
• Settings and preferences

Best Practices

• Always use labels to identify input fields
• Provide clear placeholder text as examples, not instructions
• Use appropriate input types for better mobile keyboards
• Show clear error messages near the field
• Use helper text for format requirements or character limits
• Make required fields obvious (use asterisk or "Required" label)
• Group related inputs together
• Set appropriate autocomplete attributes
• Use icons to reinforce input purpose

States

• Normal: Default state ready for input
• Focus: Active state when user is typing
• Disabled: Cannot be interacted with
• Error: Invalid input requiring correction
• Success: Valid input confirmed

HTML Structure

<!-- Basic input -->
<input type="text" class="ba-input" placeholder="Placeholder text">

<!-- Input with label -->
<div class="ba-input-group">
	<label for="input-id" class="ba-input-group__label">Label</label>
	<input type="text" id="input-id" class="ba-input" placeholder="Placeholder">
	<span class="ba-input-group__message">Helper text</span>
</div>

<!-- Input with icon -->
<div class="ba-input-wrapper ba-input-wrapper--icon-left">
	<i class="material-symbols-rounded ba-input-wrapper__icon">icon_name</i>
	<input type="text" class="ba-input" placeholder="Placeholder">
</div>

<!-- Error state -->
<div class="ba-input-group ba-input-group--error">
	<label class="ba-input-group__label">Label</label>
	<input type="text" class="ba-input ba-input--error">
	<span class="ba-input-group__message">Error message</span>
</div>

<!-- Textarea -->
<textarea class="ba-input ba-textarea" rows="4" placeholder="Placeholder"></textarea>

Available Modifiers

Accessibility

• Always associate labels with inputs using for and id attributes
• Use aria-describedby to link helper text with inputs
• Use aria-invalid="true" for error states
• Provide clear error messages using role="alert"
• Use aria-required="true" for required fields
• Ensure sufficient color contrast for text and borders
• Don't rely on placeholder text alone for labels
• Use autocomplete attributes for common fields

<div class="ba-input-group ba-input-group--error">
	<label for="email" class="ba-input-group__label">
		Email <span aria-label="required">*</span>
	</label>
	<input type="email"
		id="email"
		class="ba-input ba-input--error"
		aria-required="true"
		aria-invalid="true"
		aria-describedby="email-error"
		autocomplete="email">
	<span id="email-error" class="ba-input-group__message" role="alert">
		Please enter a valid email address
	</span>
</div>

Usage Guidelines

Avatars provide visual identification of users, teams, or entities throughout the application. They help users quickly recognize people and entities.

Avatar Types

• Image: Use actual profile photos when available
• Initials: Display user initials when no image is available
• Icon: Use for system users, bots, or special entities

When to Use

• User profiles and account settings
• Comments and activity feeds
• Team member lists
• Assignment indicators
• Navigation headers

Best Practices

• Always provide alt text for accessibility
• Use initials (first + last name) when no image is available
• Maintain consistent sizing within the same context
• Use status badges sparingly for important information only
• Limit avatar groups to 5-6 visible avatars, use "+N" for overflow
• Ensure images are square and properly cropped

Accessibility

• Always include meaningful alt text for images
• Use aria-label for initials and icon avatars
• Ensure status badges have appropriate aria-labels
• Don't rely on color alone for status indication

HTML Structure

<!-- Avatar with image -->
<div class="ba-avatar ba-avatar--[size]">
	<img src="path/to/image.jpg" alt="User Name">
</div>

<!-- Avatar with initials -->
<div class="ba-avatar ba-avatar--[size]" aria-label="User Name">
	<span class="ba-avatar__initials">UN</span>
</div>

<!-- Avatar with icon -->
<div class="ba-avatar ba-avatar--[size]" aria-label="System User">
	<i class="material-symbols-rounded">person</i>
</div>

<!-- Avatar with status badge -->
<div class="ba-avatar ba-avatar--has-badge">
	<img src="avatar.jpg" alt="User Name">
	<span class="ba-avatar__badge ba-avatar__badge--online" aria-label="Online"></span>
</div>

<!-- Avatar group -->
<div class="ba-avatar-group">
	<div class="ba-avatar">...</div>
	<div class="ba-avatar">...</div>
	<div class="ba-avatar">
		<span class="ba-avatar__more">+3</span>
	</div>
</div>

Available Modifiers

Usage Guidelines

Selection controls allow users to make choices from a set of options. Choose the appropriate control based on the selection behavior needed.

When to Use Each Control

• Checkboxes: Use when users can select multiple options from a list
• Radio Buttons: Use when users must select exactly one option from a list
• Toggle Switch: Use for binary on/off settings that take effect immediately

Best Practices

• Use clear, concise labels for each option
• Group related options together
• For radio buttons, always have one option selected by default
• Use toggle switches for settings that take effect immediately
• Use checkboxes for settings that require confirmation (Save/Apply)
• Provide group labels when presenting multiple related selections
• Maintain consistent vertical spacing between options
• Make the entire label clickable, not just the control
• Limit radio button groups to 5-7 options (use dropdown for more)

Checkbox Guidelines

• Use for independent options that don't affect each other
• Allow users to select zero, one, or multiple options
• Consider "Select All" for lists with many items
• Show indeterminate state for partial selections in hierarchies

Radio Button Guidelines

• Use for mutually exclusive options
• Always provide at least 2 options, maximum 7
• List options in a logical order (alphabetical, numerical, or by importance)
• Never use a single radio button

Toggle Switch Guidelines

• Use for binary settings with immediate effect
• Label should describe the "on" state
• Consider showing status text (On/Off, Enabled/Disabled)
• Use in settings panels and preference screens

HTML Structure

<!-- Checkbox -->
<label class="ba-checkbox">
	<input type="checkbox" id="checkbox-id" class="ba-checkbox__input">
	<span class="ba-checkbox__box"></span>
	<span class="ba-checkbox__label">Label Text</span>
</label>

<!-- Radio -->
<label class="ba-radio">
	<input type="radio" name="group-name" class="ba-radio__input">
	<span class="ba-radio__circle"></span>
	<span class="ba-radio__label">Label Text</span>
</label>

<!-- Toggle Switch -->
<label class="ba-switch">
	<input type="checkbox" class="ba-switch__input">
	<span class="ba-switch__track">
		<span class="ba-switch__thumb"></span>
	</span>
	<span class="ba-switch__label">Label Text</span>
</label>

<!-- Checkbox Group -->
<div class="ba-checkbox-group">
	<div class="ba-checkbox-group__label">Group Label</div>
	<label class="ba-checkbox">...</label>
	<label class="ba-checkbox">...</label>
</div>

<!-- Radio Group -->
<div class="ba-radio-group">
	<div class="ba-radio-group__label">Group Label</div>
	<label class="ba-radio">...</label>
	<label class="ba-radio">...</label>
</div>

Accessibility

• Use <label> elements wrapping the input and text for clickable labels
• Ensure unique id attributes for each input
• Use same name attribute for radio buttons in the same group
• Provide group labels using fieldset/legend or role="group"
• Use aria-describedby for additional instructions
• Ensure sufficient color contrast for all states
• Make the clickable area large enough (minimum 44x44px)
• Support keyboard navigation (Tab, Space, Arrow keys for radios)
• Announce state changes for screen readers

<fieldset>
	<legend>Select your notification preferences</legend>
	<label class="ba-checkbox">
		<input type="checkbox" class="ba-checkbox__input"
			id="email-notif"
			aria-describedby="email-help">
		<span class="ba-checkbox__box"></span>
		<span class="ba-checkbox__label">Email notifications</span>
	</label>
	<span id="email-help" class="help-text">
		Receive updates via email
	</span>
</fieldset>

Usage Guidelines

Tabs organize related content into separate views within the same context, allowing users to switch between them without leaving the page.

When to Use Tabs

• Organizing related content into logical groups
• Reducing page clutter by showing one section at a time
• Switching between different views of the same data
• Settings and configuration panels
• Profile or detail pages with multiple sections

When NOT to Use Tabs

• For primary navigation (use main menu instead)
• When content needs to be compared across sections
• For sequential processes (use stepper instead)
• When tabs would exceed 7-8 items (use dropdown or sidebar)
• For filtering content (use chips or filters instead)

Best Practices

• Use clear, concise labels (1-2 words)
• Limit tabs to 5-7 for optimal usability
• Always have one tab selected by default
• Order tabs logically (by importance, frequency, or sequence)
• Keep tab content independent - avoid dependencies between tabs
• Use consistent tab layout across the application
• Consider mobile responsiveness - tabs may need to stack or scroll
• Add counts or badges to show tab content quantity
• Use icons to reinforce tab meaning when appropriate

Tab Types

• Standard Tabs: Text-based tabs for most use cases
• Icon Tabs: Icons with text for enhanced clarity
• Icon-Only Tabs: Compact tabs using only icons (with tooltips)
• Tabs with Badges: Show counts or status indicators
• Vertical Tabs: For sidebar navigation in settings or dashboards

Accessibility

• Use semantic HTML with role="tablist", role="tab", and role="tabpanel"
• Implement proper keyboard navigation (Arrow keys, Home, End)
• Use aria-selected to indicate active tab
• Link tabs to panels with aria-controls and id
• Ensure sufficient color contrast for active state
• Provide focus indicators for keyboard navigation
• For icon-only tabs, include aria-label or title

HTML Structure

<!-- Simple tabs -->
<ul class="ba-tabs ba-tabs--basic" role="tablist">
	<li role="presentation" class="active">
		<a href="#tab1" class="ba-tabs__tab" role="tab" data-toggle="tab">Overview</a>
	</li>
	<li role="presentation">
		<a href="#tab2" class="ba-tabs__tab" role="tab" data-toggle="tab">Details</a>
	</li>
	<li role="presentation">
		<a href="#tab3" class="ba-tabs__tab" role="tab" data-toggle="tab">Settings</a>
	</li>
</ul>

<!-- Tabs with Icons -->
<ul class="ba-tabs ba-tabs--with-icons" role="tablist">
	<li role="presentation" class="active">
		<a href="#tab1" class="ba-tabs__tab" role="tab" data-toggle="tab">
			<i class="material-symbols-rounded">dashboard</i>
			<span>Dashboard</span>
		</a>
	</li>
	<li role="presentation">
		<a href="#tab2" class="ba-tabs__tab" role="tab" data-toggle="tab">
			<i class="material-symbols-rounded">list</i>
			<span>Projects</span>
		</a>
	</li>
</ul>

JavaScript Example

// Simple tab switching without Bootstrap
$('.ba-tabs__tab').on('click', function() {
	var $this = $(this);
	var tabId = $this.data('tab');

	// Update active tab
	$this.addClass('ba-tabs__tab--active')
		.siblings().removeClass('ba-tabs__tab--active');

	// Show corresponding content
	$('#' + tabId).addClass('active').show()
		.siblings('.tab-pane').removeClass('active').hide();
});

// Tab navigation with keyboard
$('.ba-tabs__tab').on('keydown', function(e) {
	var $tabs = $('.ba-tabs__tab');
	var $current = $(this);
	var index = $tabs.index($current);

	if (e.key === 'ArrowRight') {
		e.preventDefault();
		var $next = $tabs.eq(index + 1);
		if ($next.length) $next.click().focus();
	} else if (e.key === 'ArrowLeft') {
		e.preventDefault();
		var $prev = $tabs.eq(index - 1);
		if ($prev.length) $prev.click().focus();
	} else if (e.key === 'Home') {
		e.preventDefault();
		$tabs.first().click().focus();
	} else if (e.key === 'End') {
		e.preventDefault();
		$tabs.last().click().focus();
	}
});

// Bootstrap tabs usage
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
	var activeTab = e.target; // newly activated tab
	var previousTab = e.relatedTarget; // previous active tab
	console.log('Switched from', previousTab, 'to', activeTab);
});

ARIA Pattern

<button role="tab"
		aria-selected="false"
		aria-controls="panel-2"
		id="tab-2"
		class="ba-tabs__tab"
		tabindex="-1">
		Tab Two
	</button>
</div>

Usage Guidelines

Dropdowns provide contextual menus and selectable lists that help users choose from a set of options. They conserve screen space while offering an organized way to present multiple choices.

Dropdown Types

• Basic Dropdown: Simple selection menu with searchable options for quick filtering
• Multi-level Dropdown: Complex dropdown with parent categories and sub-options for hierarchical selection

When to Use

• Selecting from a list of options (5+ items)
• Filtering content with multiple criteria
• Navigation menus with grouped actions
• Settings and configuration panels
• Form inputs requiring option selection

Best Practices

• Include search functionality for lists with 10+ items
• Use clear, descriptive headers to indicate the purpose
• Show selected state with check icons or background highlighting
• Provide "no results" feedback when search yields nothing
• Keep dropdown width appropriate to content (use CSS variables for customization)
• Close dropdown when clicking outside or after selection (unless multi-select)
• Include footer actions when additional operations are needed
• Use multi-level dropdowns for complex hierarchical data only

HTML Structure

<!-- Basic dropdown -->
<div class="dropdown ba-dropdown">
<button class="ba-btn ba-btn--secondary" data-toggle="dropdown">
	Dropdown Button
</button>
<ul class="dropdown-menu ba-dropdown__menu">
	<li class="ba-dropdown__header">Header Text</li>
	<div class="ba-dropdown__body-wrapper">
	<!-- Search input -->
	<li class="ba-dropdown__body-items">
		<div class="ba-input-group">
		<i class="material-symbols-rounded">search</i>
		<input type="text" class="ba-input" placeholder="Search...">
		</div>
	</li>

	<!-- Menu items -->
	<div class="ba-dropdown__body-items scroll-thin">
		<li>
		<a class="ba-dropdown__item" href="#">
			<span class="ba__text">Option 1</span>
			<i class="material-icons icon">check</i>
		</a>
		</li>
	</div>
	</div>

	<!-- Optional footer -->
	<li class="ba-dropdown__footer-items">
	<a class="ba-dropdown__footer-item" href="#">
		<span>Create new item</span>
	</a>
	</li>
</ul>
</div>

<!-- Multi-level dropdown -->
<div class="dropdown ba-dropdown ba-dropdown--multi-dropdown">
<button class="ba-btn ba-btn--secondary" data-toggle="dropdown">
	Multi-level Dropdown
</button>
<ul class="dropdown-menu ba-dropdown__menu">
	<li class="ba-dropdown__header">Select Category</li>
	<div class="ba-dropdown__body-wrapper">
	<!-- Sidebar with categories -->
	<ul class="ba-dropdown__sidebar ba-dropdown__body-items">
		<li>
		<label for="option_1" class="ba-dropdown__item">
			<span>Category 1</span>
			<i class="material-icons icon-arrow">chevron_right</i>
		</label>
		</li>
	</ul>

	<!-- Content area -->
	<input type="radio" name="dropdown-radio"
			class="ba-dropdown-input visuallyhidden"
			id="option_1" checked>
	<ul class="ba-dropdown__content">
		<!-- Search and items for this category -->
	</ul>
	</div>
</ul>
</div>

Component Elements

Accessibility

• Ensure dropdown trigger has clear, descriptive text
• Support keyboard navigation (Tab, Enter, Escape, Arrow keys)
• Use aria-expanded to indicate dropdown state
• Include proper focus management when opening/closing
• Maintain logical tab order through dropdown items
• Provide visual focus indicators on all interactive elements
• Use semantic HTML (button for triggers, list for menus)
• Ensure search input is properly labeled
• For multi-level dropdowns, use radio inputs with proper labels

Usage Guidelines

Tooltips provide brief, contextual information when users hover over or focus on an element. They should supplement, not replace, visible labels.

When to Use Tooltips

• Explaining icon-only buttons or controls
• Providing additional context for UI elements
• Showing keyboard shortcuts
• Displaying full text for truncated content
• Offering help text for form fields
• Explaining disabled states

When NOT to Use Tooltips

• For essential information (use visible text instead)
• On mobile devices (tooltips don't work well on touch)
• For lengthy content (use popovers or modals instead)
• For information users need to reference while interacting
• On disabled elements (they can't receive focus or hover)

Best Practices

• Keep tooltip text concise (1-2 short sentences maximum)
• Don't repeat visible text in tooltips
• Use sentence case for tooltip content
• Ensure tooltips don't obscure related content
• Position tooltips consistently throughout the application
• Add slight delay before showing tooltips (300-500ms)
• Always provide alternative text for screen readers
• Make tooltips dismissible by moving mouse away or pressing Esc
• Don't put interactive elements inside tooltips

Tooltip vs Popover

• Tooltips: Brief, non-interactive, automatic display on hover/focus
• Popovers: Rich content, can be interactive, require explicit action to show

Positioning

• Top: Default position, appears above the element
• Right: Appears to the right of the element
• Bottom: Appears below the element
• Left: Appears to the left of the element
• Position should adjust automatically if there's insufficient space

Mobile Considerations

• Avoid tooltips on mobile - they don't work well with touch
• Consider using visible labels or help icons with tappable hints
• If tooltips are necessary, make them tappable and dismissible
• Ensure interactive elements remain accessible without tooltips

HTML Structure

<!-- Basic tooltip -->
<button class="ba-btn ba-btn--secondary" data-toggle="tooltip" data-placement="top" title="Top tooltip">
    Top
</button>

<!-- Custom Classes Tooltip -->
<button class="ba-btn ba-btn--secondary" data-toggle="tooltip" data-placement="top" data-custom-class="ba-tooltip--white" title="Top tooltip">
    Top
</button>

<!-- Tooltip with HTML -->
<button class="ba-btn ba-btn--primary"
        data-toggle="tooltip"
        data-placement="top"
        data-html="true"
        data-custom-class="ba-tooltip--richtext"
        title="<strong>This is a tooltip</strong><br>Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.">
    Tooltip Top
</button>

JavaScript Example

// Initialize Bootstrap tooltips
$(function() {
	$('[data-toggle="tooltip"]').tooltip({
		delay: { show: 500, hide: 100 },
		trigger: 'hover focus'
	});
});

// Custom tooltip behavior
$('.ba-tooltip').each(function() {
	var $tooltip = $(this);
	var $trigger = $tooltip.children().first();
	var $text = $tooltip.find('.ba-tooltip__text');

	$trigger.on('mouseenter focus', function() {
		clearTimeout($tooltip.data('hideTimer'));
		var showTimer = setTimeout(function() {
			$text.addClass('ba-tooltip__text--visible');
		}, 500);
		$tooltip.data('showTimer', showTimer);
	});

	$trigger.on('mouseleave blur', function() {
		clearTimeout($tooltip.data('showTimer'));
		var hideTimer = setTimeout(function() {
			$text.removeClass('ba-tooltip__text--visible');
		}, 100);
		$tooltip.data('hideTimer', hideTimer);
	});

	// Dismiss on Esc key
	$trigger.on('keydown', function(e) {
		if (e.key === 'Escape') {
			$text.removeClass('ba-tooltip__text--visible');
		}
	});
});

// Dynamic tooltip positioning
function positionTooltip($tooltip, $text) {
	var triggerRect = $tooltip[0].getBoundingClientRect();
	var tooltipRect = $text[0].getBoundingClientRect();
	var viewportHeight = window.innerHeight;
	var viewportWidth = window.innerWidth;

	// Check if tooltip fits above
	if (triggerRect.top - tooltipRect.height < 0) {
		$tooltip.addClass('ba-tooltip--bottom');
	}

	// Check if tooltip fits on right
	if (triggerRect.right + tooltipRect.width > viewportWidth) {
		$tooltip.addClass('ba-tooltip--left');
	}
}

Accessibility

• Use role="tooltip" on tooltip content
• Link tooltip to trigger with aria-describedby
• Ensure tooltips are keyboard accessible (appear on focus)
• Allow dismissal with Esc key
• Don't rely solely on tooltips for critical information
• Provide adequate color contrast (minimum 4.5:1)
• For icon buttons, include aria-label in addition to tooltip
• Test with screen readers to ensure proper announcement
• Ensure tooltips don't interfere with keyboard navigation

<div class="ba-tooltip">
	<button class="ba-btn ba-btn--icon"
		aria-label="Delete item"
		aria-describedby="delete-tooltip">
		<i class="material-symbols-rounded">delete</i>
	</button>
	<span class="ba-tooltip__text"
		id="delete-tooltip"
		role="tooltip">
		Delete this item permanently
	</span>
</div>

Content Guidelines

• Use plain, descriptive language
• Start with a verb for action tooltips ("Delete this item")
• Include keyboard shortcuts in parentheses when relevant
• Use sentence case, not title case
• Keep it under 60 characters when possible
• Avoid redundancy with visible labels
• Don't include punctuation unless multiple sentences

Good Examples

• "Edit project details"
• "Save changes (Ctrl+S)"
• "This action cannot be undone"
• "Assigned to John Doe"

Bad Examples

• "Click here to edit" (redundant, not concise)
• "SAVE CHANGES" (all caps, not sentence case)
• "This is the button you click when you want to..." (too long)
• "Edit" (when button already says "Edit")

Usage Guidelines

The Attachments component provides a user-friendly interface for uploading multiple files with drag & drop support, file validation, and preview functionality.

When to Use

• Bug reports and issue tracking with file attachments
• Document uploads in forms
• Media file uploads (images, videos, audio)
• Bulk file uploads with multiple file selection

Best Practices

• Set appropriate file size limits based on your requirements
• Restrict file types to allowed extensions only
• Provide clear feedback for invalid files
• Show file size and validation errors immediately
• Allow users to remove individual files before upload
• Display file preview with name and size information

HTML Structure

<!-- Container div -->
<div id="attachment_files"></div>

<!-- Initialize with JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
	if (document.getElementById('file-upload-area')) {
		var uploader1 = new FileUploadPlugin('file-upload-area', {
			maxFileSize: 10,
			maxFilesCount: 10,
			allowedExtensions: ['png', 'jpg', 'jpeg', 'pdf', 'doc', 'docx'],
			dragDropText: 'Drag & Drop files to attach or ',
			browseButtonText: 'Browse',
			customClass: 'bug__new-files attchment-files-box'
		});

		window.uploaderExample = uploader1;
	}
});
</script>

Configuration Options

Public Methods

Usage Guidelines

Tags are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions.

Tag Types

• Static Tags: Display non-interactive information like categories or tags
• Dismissible Tags: Can be removed by the user (selected items, filters)
• Clickable Tags: Interactive tags for filtering or selection
• Input Tags: Represent user input in forms (tags, recipients)

When to Use

• Tag systems and categorization
• Filter selections
• Contact or recipient lists
• Selected items display
• Status indicators
• Quick actions or shortcuts

Best Practices

• Keep chip text short and scannable (1-3 words)
• Use color variants to convey meaning and status
• Group related tags together
• For dismissible tags, make close button obvious and accessible
• Use icons sparingly to reinforce meaning
• Consider wrapping tags to new lines in responsive layouts
• Don't use tags for primary navigation
• Limit the number of tags displayed (consider "Show more" for long lists)

Tag vs Badge

• Tags: Interactive, can be dismissed, represent selections or filters
• Badges: Non-interactive, display counts or status, typically smaller

Color Variants

• Neutral (default): General purpose tags and categories
• Primary: Important or selected items
• Success: Completed, approved, or positive status
• Warning: Needs attention or in-progress status
• Danger: Critical, blocked, or error status
• Info: Informational or neutral status

HTML Structure

<!-- Basic Tag -->
<span class="ba-tag ba-tag--[variant] ba-tag--[size]">
	Tag Text
</span>

<!-- Tag with icon -->
<span class="ba-tag ba-tag--[variant]">
	<i class="material-symbols-rounded">icon_name</i>
	<span>Tag Text</span>
</span>

<!-- Dismissible Tag -->
<span class="ba-tag ba-tag--dismissible ba-tag--[variant]">
	<span>Tag Text</span>
	<button class="ba-tag__close" title="Remove" aria-label="Remove Tag Text">
		<i class="material-symbols-rounded">close</i>
	</button>
</span>

<!-- Clickable Tag -->
<button class="ba-tag ba-tag--clickable">
	Tag Text
</button>

<!-- Tag with avatar -->
<span class="ba-tag">
	<div class="ba-avatar ba-avatar--xs">
		<span class="ba-avatar__initials">JD</span>
	</div>
	<span>John Doe</span>
</span>

JavaScript Example

// Handle Tag dismissal
$('.ba-tag__close').on('click', function(e) {
	e.stopPropagation();
	$(this).closest('.ba-tag').fadeOut(200, function() {
		$(this).remove();
		// Trigger custom event or callback
		$(document).trigger('tag:removed', { tag: this });
	});
});

// Handle clickable tag selection
$('.ba-tag--clickable').on('click', function() {
	// Toggle selected state
	$(this).toggleClass('active');

	// Or make exclusive selection
	$(this).addClass('active')
		.siblings('.ba-tag--clickable')
		.removeClass('active');
});

Accessibility

• For dismissible tags, include clear aria-label on close button
• Use <button> element for clickable and dismissible tags
• Ensure sufficient color contrast for all variants
• Use role="listbox" for chip groups with selection
• Announce chip removal to screen readers using aria-live regions
• Support keyboard navigation (Tab, Enter, Delete for dismissal)
• Make close button minimum 44x44px touch target

<div role="listbox" aria-label="Selected filters">
	<span class="ba-tag ba-tag--dismissible" role="option">
		<span>Design</span>
		<button class="ba-tag__close"
			title="Remove Design filter"
			aria-label="Remove Design filter">
			<i class="material-symbols-rounded">close</i>
		</button>
	</span>
</div>
<div aria-live="polite" aria-atomic="true" class="sr-only">
	<!-- Announce removals here -->
</div>