Chip

The Chip component helps filter content, or trigger actions.

text

trailing

leading

all

only trailing leading

default

hover

active

disabled

Code

<button class="backoffice-chip">
  <span>Hello</span>
  <.icon name="chevron-down" />
</button>
<button class="backoffice-chip">
  <.icon name="athletics" />
  <span>Hello</span>
</button>

Details

Attribute	Type	Description
.backoffice-chip	component	Chip component, this is required for all chips
.backoffice-chip-active	modifier	Chip component with active style
[disabled]	modifier	Chip component with disabled style
.backoffice-chip-disabled	alternative	Chip component with disabled style using class name