Skip to content
Tenet UI

Button

Status: stableAccessibility reviewedtenet-ui@0.4.0
Import
import { Button } from 'tenet-ui';

Also accepts every prop of ButtonHTMLAttributes<HTMLButtonElement>.

Source: src/components/Button/Button.tsx

Usage guidelines

Section titled “Usage guidelines”

When to use: a Button triggers an action (submit, save, delete, open). For navigation to another page, use a link, not a Button.

Rules

Section titled “Rules”
  • Use exactly one variant="primary" per surface — the single most important action.
  • Use variant="default" for secondary actions, variant="invisible" for low-emphasis / tertiary actions.
  • Use variant="danger" only for destructive actions (delete, remove); pair it with a confirmation.
  • Never hardcode colors, padding, or sizes. All colors come from fgColor / bgColor / borderColor tokens; all spacing from the space scale; heights from control.*.
  • Always provide a visible text label. Icon-only buttons must use IconButton with an aria-label; icons come from tenet-ui/icons and go in leadingIcon / trailingIcon (decorative).
  • Do not nest interactive elements (links, buttons) inside a Button.
  • Use fullWidth to fill the container (inside a Stack.Item or Grid.Item); block is the deprecated 0.3.0 name and warns.
  • Labels are verbs that name the outcome (“Save changes”, “Delete article”), sentence case, never “Submit” or “OK”.

Do / Don’t

Section titled “Do / Don’t”
  • ✅ <Button variant="primary">Save changes</Button>
  • ❌ <button style={{ background: '#0969da', padding: '13px' }}>Save</button> — raw element, hardcoded color, off-scale padding.
  • ❌ <Button kind="primary"> — kind is not a prop; the prop is variant.

See also: IconButton for icon-only actions, Link for navigation; system guidelines content (button labels) and color (one primary per surface).

Examples

Section titled “Examples”
7 stories for Button — open in Storybook

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Section titled “Props”
PropTypeDefaultDescription
variant'default' | 'primary' | 'danger' | 'invisible'
ButtonVariant
defaultVisual style of the button. Use primary for the single most important action per surface.
size'small' | 'medium' | 'large'
ButtonSize
mediumControl height / padding scale.
leadingIconReactNode—Icon rendered before the label.
trailingIconReactNode—Icon rendered after the label.
fullWidthboolean—Stretch the button to fill the available width.
blockdeprecatedboolean—Stretch the button to fill the available width.
Deprecated since 0.4.0. Use fullWidth instead (renamed in 0.4.0). block keeps working until 0.5.0.
childrenReactNode—Button label.

Deprecated props keep working for one minor release; the replacement is named in the row.