bellhop by actabl

When to use

Use tags to label, categorize, or organize items using keywords.

Categories & Labels

Display categories, topics, or classifications for content.

Active Filters

Show currently applied filters that can be removed.

Selections

Indicate selected items or options in a compact format.

When not to use

  • For status indicators—use badge instead
  • For navigation—use breadcrumbs or tabs
  • When tags aren't dismissible or actionable—consider using badges
  • For very long text—tags should be concise

Sizes

Tags come in three sizes for different contexts.

Variants

Tags support text-only and avatar variants.

Text Only

Standard tag with text label.

Dismissible

Tags with close button for removal.

Multiple Tags

Tags are often used in groups to display multiple categories or filters.

Best Practices

Follow these guidelines when using tags.

Do

  • Keep tag labels short and concise (1-3 words)
  • Use dismissible tags for removable filters or selections
  • Group related tags together
  • Use consistent capitalization (sentence case or lowercase)
  • Truncate long labels with ellipsis

Don't

  • Don't use tags for actionable items (use buttons instead)
  • Don't make non-dismissible tags look dismissible
  • Don't use too many tags in one place
  • Don't use full sentences as tag labels

Accessibility

Tags are designed to be accessible to all users.

Keyboard Navigation

  • Tab - Move to dismiss button (if dismissible)
  • Enter/Space - Dismiss tag
  • Dismiss button is keyboard accessible

Screen Reader

  • Tag label is announced
  • Dismiss button has proper aria-label
  • Disabled state is communicated

Visual Design

  • Sufficient color contrast for text
  • Clear visual distinction between states
  • Focus indicator on dismiss button

Resources

Design and development resources for the Tag component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →