Button

A one-shot action. primary is ink-filled and appears once per section; ghost is outlined for secondary actions; quiet is filled for low-emphasis actions such as Cancel. Icons come from Hugeicons and inherit the button's ink.

import { Button, IconButton } from "@puckoops/camelot";
NameDescriptionDefaultControl
onClick
function		--
variant
Visual weight
"primary""ghost""quiet"		"ghost"
variant
size
32px, 36px (default) or 44px
"sm""md""lg"		"md"
size
iconStart
IconDefinition		--
iconEnd
IconDefinition		--
asChild
Render the child element (a link, say) with the button's styling.
boolean		--
loading
boolean		-
children
ReactNode		-

Also takes ButtonHTMLAttributes<HTMLButtonElement>.

When to use

Use Button for anything that fires an action: submit, save, open a drawer. One primary per section; everything else is ghost or quiet. Use IconButton for a toolbar or row action that is a single glyph, and always give it an aria-label.

  • Use TextLink instead when the action navigates somewhere and reads as part of a sentence.
  • Use ChoiceGroup instead when the control keeps a selected state instead of firing once.
  • Use Menu instead when one trigger offers several actions, such as Add new.

Examples

Ghost

Secondary actions beside a primary, or on their own in a filter row.

Quiet

The lowest weight: Cancel, Clear, dismissive actions.

With Icons

Icons sit 8px from the label and take its ink.

Sizes

Large is for the landing page; the product uses medium and small.

Loading

Disabled

Icon Only

IconButton is 32px (or 28px small) and always needs an aria-label.

All Variants

Every variant at rest, with an icon, and disabled. Hover and tab to see the states.

primary
ghost
quiet