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
<button class="backoffice-button backoffice-button-ghost">My Text</button>
| Class name | type | |
|---|---|---|
| backoffice-button | component | Container element |
backoffice-button[data-no-animation], @media (prefers-reduced-motion: reduce) { .backoffice-button { ... } } | modifier | Drops the parameters of animation |
| backoffice-button-xs | modifier | Adds xs size |
| backoffice-button-sm | modifier | Adds sm size |
| backoffice-button-fill | modifier | Sets the button`s fill options |
| backoffice-button-icon | modifier | Sets the icon`s display parameters |
| backoffice-button-full-width | modifier | Sets the buttons`s variant |
| backoffice-button-outline | modifier | Sets the outline style |
backoffice-button-outline small, backoffice-button-outline svg, backoffice-button-outline \*[data-moon-icon] | modifier | Sets the outline style |
| backoffice-button-ghost | modifier | Sets the buttons`s variant |
backoffice-button-ghost small, backoffice-button-ghost svg, backoffice-button-ghost \*[data-moon-icon] | modifier | Sets the buttons`s variant |
backoffice-button:focus, backoffice-button-focus | modifier | Sets the display of the focused status |
backoffice-button-disabled, backoffice-button[disabled], backoffice-button:disabled | modifier | Sets the display of the disabled status |
@media (hover: hover) { .backoffice-button-hover, .backoffice-button:hover, .backoffice-button[data-is-hover] { ... } } | modifier | Sets the display of the hover status |
backoffice-button-active:after, backoffice-button:active:after | modifier | Sets the display of the :after pseudo-element in the active status |
backoffice-button-ghost.backoffice-button-active:after, backoffice-button-ghost.backoffice-button:active:after, backoffice-button-outline.backoffice-button-active:after, backoffice-button-outline.backoffice-button:active:after | modifier | Sets the display of the :after pseudo-element in the active status for other variants of the button |
backoffice-button-hover:after, backoffice-button:hover:after, backoffice-button[data-is-hover]:after | modifier | Sets the display of the :after pseudo-element in the hover status |