fetaUI
GitHub

Button

One family for every action, with a label, optional icons and a shortcut key.

FreeWeb and Mobile6 variantsMotion

Preview

npx shadcn add @fetaui/button
Playground
Variants
Sizes
Shapes
Icons and shortcut
Loading and success
Disabled
Variant
Size
Shape
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/button

Variants

Six variants map to how important an action is.

Size
Shape
Motion

Shapes

Soft fits product surfaces, Pill fits marketing and floating actions.

Variant
Size
Motion

Loading and success

Async actions keep their width while they load, then confirm.

Variant
Size
Motion

Accessibility

  • A native button, so role and focus come for free.
  • Loading sets aria-busy and blocks double submits.
  • Focus shows a 2 px ring with a 2 px gap.
  • The label stays plain text, so screen readers read it as written.

Motion

  • Press scales to 0.98 on a firm spring.
  • Hover draws the label in solid ink, letter by letter. It runs when the label is plain text.
  • Press waves the label one word at a time. Icons and the shortcut key stay still.
  • Set animated to false to turn off the press scale, the label motion and the spinner.
  • With reduced motion, press is a color change only, the label does not draw or wave, and the spinner turns slowly.

Responsive behavior

  • Each size is 8 px taller on Mobile.
  • The label draw needs a mouse, so touch screens get the press wave only.
  • The shortcut key hides on touch screens.

Performance

  • The label is plain text at rest. Letters mount only while it animates, then unmount.
  • Press scales with a transform on the compositor, so it never runs layout.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import from @/components/fetaui/button after installing it.
  • Use one Primary per view and pass status, loadingLabel and successLabel for async actions.
  • Icons come from @fetaui/react and go in leadingIcon or trailingIcon.
  • Composes Spinner, Kbd and the shared label motion.
/docs/components/button/markdown
PreviousTheme Toggle
NextIcon Button

Related

TabsComponentSwitch between views of the same thing. Panels swipe with the finger and the indicator follows.BreadcrumbComponentShows where the current page sits and lets people step back up.AvatarComponentA person or workspace as an illustrated photo, initials or an icon, with presence, a story ring and overlapping groups.Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.SidebarComponentNav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.