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>
| Class name | type | |
|---|---|---|
| backoffice-chip | component | Container element |
@media (hover: hover) { .backoffice-chip:hover:after, .backoffice-chip-hover:after, .backoffice-chip[data-is-hover]:after { ... } } | modifier | Sets the display of the :after pseudo-element in the hover status |
| backoffice-chip-active | modifier | Sets the display of the active status |
backoffice-chip:disabled, backoffice-chip-disabled | modifier | Sets the display of the disabled status |