Button

Status: Stable
Accessibility: Reviewed
Package: tenet-ui@0.5.0
Source: Button.tsx

import { Button } from 'tenet-ui';

Also accepts every prop of ButtonHTMLAttributes<HTMLButtonElement>.

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

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

✅ <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

7 stories for Button, open in Storybook

Default components-button--default
Primary components-button--primary
Danger components-button--danger
Invisible components-button--invisible
Sizes components-button--sizes
With Leading Icon components-button--with-leading-icon
With Trailing Icon components-button--with-trailing-icon

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

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'danger' \| 'invisible'` ButtonVariant	`default`	Visual style of the button. Use `primary` for the single most important action per surface.
`size`	`'small' \| 'medium' \| 'large'` ButtonSize	`medium`	Control height / padding scale.
`leadingIcon`	`ReactNode`	None	Icon rendered before the label.
`trailingIcon`	`ReactNode`	None	Icon rendered after the label.
`fullWidth`	`boolean`	None	Stretch the button to fill the available width.
`block`deprecated	`boolean`	None	Stretch the button to fill the available width. Deprecated since 0.5.0. Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.6.0.
`children`	`ReactNode`	None	Button label.

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