An action control with clear hierarchy and state.

Import

import { Button } from 'bmates-ui';

Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<Button variant="primary">Save changes</Button>

<Button variant="primary">Save changes</Button>

The examples below isolate the props that change visual output or interaction.

<Button variant="success">Success</Button>

<Button size="lg">Large</Button>

<Button disabled>Disabled</Button>

variant

Default default

Visual style. Available values: default, secondary, success, danger, warning, info, outline, and ghost.

size

Type sm | md | lg | icon

Default md

Controls the button height and padding.

full

Type boolean

Default false

Makes the button fill its container width.

disabled

Type boolean

Default false

Disables interaction. Native button props, including type and onClick, are supported.

Every component in the table is exported from bmates-ui.
Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
For application-owned state, use a controlled value and its change handler instead of only a default* prop.