Easily create nice looking buttons, which come in different styles.
To apply this component, add the .uk-button class and a modifier such as .uk-button-default to an <a> or <button> element. Add the disabled attribute to a <button> element to disable the button.
There are several style modifiers available. Just add one of the following classes to apply a different look.
.uk-button-default.uk-button-ghost.uk-button-primary.uk-button-secondary.uk-button-success.uk-button-warning.uk-button-info.uk-button-danger.uk-button-textYou can use CSS variables to customize this component in any way you prefer.
There are several size modifiers available. Just add one of the following classes to make the button smaller or larger.
| Class | Description |
|---|---|
.uk-button-xsmall | Applies extra small size. |
.uk-button-small | Applies small size. |
.uk-button-medium | Applies medium size. |
.uk-button-large | Applies large size. |
You can use Tailwind CSS utility classes alongside button classes and the it will follow its width.
Use .uk-button-icon class to create an icon button, which can be used for social icons or toolbars.
To create a button group, add the .uk-button-group class to a <div> element around the buttons. That’s it! No further markup is needed.
A button can be used to trigger a dropdown menu from the Dropdown component.
You can use Frankenstyle utilities or the Spinner component to add a loading state.