Buttoncomponent

Render either a <button> or an <a href=""> styled as a button, based on whether an onClick or href prop is provided.

• Content-width by default (never grows); it won't shrink below its label. Pass full to fill the available width.
• Accepts all ButtonVariants styling props plus the ClickableProps (onClick, href, disabled, etc.).

A clickable styled as a solid button. Renders an <a href=""> when given href, or a <button> when given onClick — the shared <Clickable> primitive picks the element, so a button is always the right semantics for what it does.

Things to know:

• Content-width by default: it sizes to its label and never grows. Pass full to fill the available width (it then shrinks to share a row, down to the content floor).
• strong marks the default action in a form — a filled background instead of an outline. plain and outline drop the background until hover/focus.
• color= / status= move the tint anchor, so the background, border and label re-derive from the same ladder; small tightens the padding.
• getButtonClass(variants) returns the same className the component composes — use it to style a non-<button> element as a button when Button itself doesn't fit.

Usage

Actions and links

import { Button } from "shelving/ui";

<Button onClick={save} color="primary" strong>Save</Button>
<Button href="/about">About</Button>
<Button onClick={remove} status="error">Delete</Button>

A row of buttons

import { Button } from "shelving/ui";
import { Row } from "shelving/ui";

<Row gap="small" right>
  <Button plain onClick={cancel}>Cancel</Button>
  <Button strong onClick={submit}>Continue</Button>
</Row>

Reusing the button class

import { getButtonClass } from "shelving/ui";

// Style an arbitrary element as a button.
<label className={getButtonClass({ color: "primary", small: true })}>
  Upload<input type="file" hidden />
</label>

Styling

Button paints from the tint ladder. Override these hooks at :root or any ancestor scope; move --button-tint to recolour the whole button, or use a per-property hook for one change.

Global tokens it reads: the tint ladder --tint-50 / --tint-80 / --tint-90 / --tint-95 / --tint-100 / --tint-55, plus --space-small, --space-xxsmall, --radius-xsmall, --stroke-normal, --stroke-focus, --color-focus, --font-body, --weight-strong, --size-normal, --leading, and --duration-fast.

/* Theme: pill-shaped buttons. */
:root {
  --button-radius: 999px;
}