Button

Semantic HTML button element.

Examples

Styles

Several button styles are available to choose from. These only change the colors, background and border of the button.

The primary, secondary, destructive, ghost, and outline classes can be used to apply these styles.

It's recommended to use the link style (and its link class) only for <a> elements with a role="button".

Link

Icons

Icons can be added to buttons to enhance their visual appeal and usability. They can also be the only content of a button.

Simply add an <svg> element inside the button.

The icon class can be used to size buttons to fit the icon.

States

Buttons can be put in different states, such as disabled or loading, to indicate their current status.

The disabled and aria-busy attributes can be used for this purpose.

Built by ahme.dev. The source code is available on Github