Button
The Button component is an interactive UI element that triggers an action or event when clicked.
fill
outline
ghost
default
hover
focus
active
disabled
Code
Code
<button class="backoffice-button backoffice-button-ghost">My Text</button>
<!-- Disabled -->
<button class="backoffice-button backoffice-button-fill" disabled>Disabled Button</button>
Details
| Attribute | Type | Description |
|---|---|---|
| .backoffice-button | component | Button component unstyled, this is required for all buttons |
| .backoffice-button-fill | modifier | Button component with fill style |
| .backoffice-button-outline | modifier | Button component with outline style |
| .backoffice-button-ghost | modifier | Button component with ghost style |
| .backoffice-button-full-width | modifier | Button component with full width style |
| [disabled] | modifier | Button component with disabled state |
| .backoffice-button-disabled | alternative | Button component with disabled state |
| .backoffice-button-xs | modifier | Button component with extra small size |
| .backoffice-button-sm | modifier | Button component with small size |
| .backoffice-button-icon | modifier | Button component with icon padding, it still require to apply a style modifier |
| @media (prefers-reduced-motion: reduce) | behavior | Disables animations for users that prefer reduced motion |
| [data-no-animation] | modifier | Disables animations for users that prefer reduced motion |