Honeycomb

Button

Displays a button or a component that looks like a button.

When To Use

  • To trigger an action or event.
  • To submit a form.
  • To navigate to a new page or section.
Sizes
Button comes in several sizes.
Default
The primary button style.
Outline
A button with only a border and no filled background.
Secondary
A less-prominent button for secondary actions.
Ghost
A minimal button with transparent background.
Destructive
A danger-styled button for destructive actions.
Link
A button rendered as a hyperlink.
Icon
A square, icon-only button.
With Icon
Buttons combining text and an icon.
Rounded
A fully pill-shaped rounded button.
Spinner
A loading state with a spinner inside.
Button Group
Multiple related buttons grouped together.
As Link
Use asChild to render a link styled as a button.
Login