Button

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/button

UsageCopy Anchor Link

<Button variant="primary" onClick={save}>
  Save changes
</Button>

Variants and sizesCopy Anchor Link

variant: primary, secondary (default), ghost, danger. size: sm, md (default), lg, icon. Sizes follow the density setting.

LoadingCopy Anchor Link

loading disables the button and keeps its width. The spinner only appears if loading takes longer than 150ms, so fast actions never flash one.

<Button variant="primary" loading={saving} onClick={save}>
  Save changes
</Button>

ShortcutCopy Anchor Link

shortcut shows the key hint and binds it on the page. mod is ⌘ on Apple devices and Ctrl elsewhere. Shortcuts without a modifier never fire while someone is typing.

<Button variant="primary" shortcut="mod+s" onClick={save}>
  Save
</Button>

TooltipCopy Anchor Link

tooltip shows on hover and focus. On icon buttons it also becomes the accessible label, so they can't ship unlabelled, and the shortcut moves into the tooltip.

<Button size="icon" variant="ghost" tooltip="Bold" shortcut="mod+b">
  <TextBIcon />
</Button>

ConfirmCopy Anchor Link

confirm adds a second step without a dialog. The first click swaps to the confirm label, the second runs onClick. It resets after 3 seconds, on blur, or with Esc. Both labels share one space, so the button never changes width.

<Button variant="danger" confirm="Click again to delete" onClick={remove}>
  <TrashIcon /> Delete invoice
</Button>

Changing labelsCopy Anchor Link

For labels that change on their own, pair the button with the optional Text morph.

<Button onClick={toggle}>
  <TextMorph>{following ? "Following" : "Follow"}</TextMorph>
</Button>

AccessibilityCopy Anchor Link

It is a native button. While loading it is marked busy and keeps its label, so screen readers never hear it go blank. An icon-only button takes its name from tooltip, and a shortcut is exposed as aria-keyshortcuts.

API referenceCopy Anchor Link