Chips

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

When to use

To display selected items in a multi-select input or autocomplete field
To show tags or categories associated with an item
To create removable filters or search queries
To represent user-entered data that can be edited or removed
For displaying contact information (email, phone) in a compact form

When not to use

For read-only labels without interaction (use Badges instead)
For primary navigation or actions (use Buttons)
When the information is critical and should not be easily dismissed
For displaying status indicators that should not be removable (use Badges)

Component Anatomy

A Lighthouse Chip consists of:

Chip Container: The pill-shaped background element
Icon (optional): A prepended icon for visual context
Label Text: The main content displayed in the chip
Remove Button (optional): An "X" button to dismiss/remove the chip

Variants

Chips use contextual colors to convey meaning:

Primary: For default selections or primary tags
Secondary: For less prominent tags
Success: For positive states or confirmed items
Danger: For critical items or errors
Warning: For cautionary tags
Info: For informational tags

States

Chips can be in different visual states: normal (outline) or active (filled).

Normal (Outline)

Default state with outlined style - light background tint with colored border.

Active (Filled)

Active/selected state with filled background - solid color background.

Sizes

Three size variants are available: small, medium (default), and large.

With Icon

Chips can display an icon before the label for additional context.

Removable

Chips can be made removable by adding the removable prop and listening to the @remove event.

Disabled

Disabled chips cannot be clicked or removed.

Interactive

Chips emit a @click event when clicked (if not disabled).

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "success" \| "danger" \| "warning" \| "info"`	`"primary"`	The color variant of the chip
`size`	`"sm" \| "lg"`	-	The size of the chip
`disabled`	`boolean`	`false`	Whether the chip is disabled
`active`	`boolean`	`false`	Whether the chip is in active/selected state (filled style)
`removable`	`boolean`	`false`	Whether the chip shows a remove button
`icon`	`string`	`null`	Bootstrap icon class (e.g., "bi-person")
`class`	`string`	`null`	Additional CSS classes
`removeAriaLabel`	`string`	`"Remove"`	ARIA label for the remove button

Events

Event	Payload	Description
`@click`	`Event`	Emitted when the chip is clicked (not disabled)
`@remove`	`Event`	Emitted when the remove button is clicked (if removable)

Accessibility

Chips have role="button" for screen reader compatibility
Keyboard navigation: Tab to focus, Enter/Space to activate
Remove button has customizable aria-label for screen readers
Disabled state communicated via aria-disabled
Focus visible indicator for keyboard navigation

Chips ​

When to use ​

When not to use ​

Component Anatomy ​

Variants ​

States ​

Normal (Outline) ​

Active (Filled) ​

Sizes ​

With Icon ​

Removable ​

Disabled ​

Interactive ​

Props ​

Events ​

Accessibility ​