Button

The <Button> component renders interactive buttons with various styles, sizes, and intents.

Usage

Markdown

1 <Button intent="primary">Primary Button</Button>
2 <Button intent="success">Success Button</Button>
3 <Button outlined>Outlined Button</Button>

Variants

Intents

Markdown

1 <Button intent="primary">Primary button</Button>
2 <Button intent="success">Success button</Button>
3 <Button intent="warning">Warning button</Button>
4 <Button intent="danger">Danger button</Button>
5 <Button intent="none">Plain button</Button>

Styles

Markdown

1 <Button intent="success" outlined large rounded>Large, outlined, rounded</Button>
2 <Button intent="success" minimal>Minimal</Button>
3 <Button intent="warning" mono>Monospaced</Button>

Sizes

Markdown

1 <Button small>Small Button</Button>
2 <Button>Normal Button</Button>
3 <Button large>Large Button</Button>

With icons

Markdown

1 <Button icon="download">Download</Button>
2 <Button rightIcon="arrow-right">Continue</Button>
3 <Button icon="star" rightIcon="arrow-right">Favorite</Button>

Link and disabled states

Link Button

Markdown

1 <Button href="/learn/docs/getting-started/overview">Link Button</Button>
2 <Button disabled>Disabled Button</Button>

Properties

Basic

intent

'none' | 'primary' | 'success' | 'warning' | 'danger'Defaults to 'none'

The visual intent of the button

disabled

booleanDefaults to false

Whether the button is disabled

small

booleanDefaults to false

Whether to use small size

large

booleanDefaults to false

Whether to use large size

icon

string | ReactNode

Icon to display on the left side

href

string

URL to navigate to (renders as link button)

target

string

Specifies where to open the linked URL. For typical documentation sites, links can open in the same tab (_self) or new tab (_blank). For documentation embedded in a dashboard or iframe, links can open in the parent frame (_parent) or topmost frame (_top).

Advanced

minimal

booleanDefaults to false

Whether to use minimal styling

outlined

booleanDefaults to false

Whether to use outlined styling

full

booleanDefaults to false

Whether the button should take full width

rounded

booleanDefaults to false

Whether to use rounded corners

active

booleanDefaults to false

Whether the button is in active state

mono

booleanDefaults to false

Whether to use monospace font

rightIcon

string | ReactNode

Icon to display on the right side

text

ReactNode

The button text content

className

string

Additional CSS classes

1	<Button intent="primary">Primary Button</Button>
2	<Button intent="success">Success Button</Button>
3	<Button outlined>Outlined Button</Button>

1	<Button intent="primary">Primary button</Button>
2	<Button intent="success">Success button</Button>
3	<Button intent="warning">Warning button</Button>
4	<Button intent="danger">Danger button</Button>
5	<Button intent="none">Plain button</Button>

1	<Button intent="success" outlined large rounded>Large, outlined, rounded</Button>
2	<Button intent="success" minimal>Minimal</Button>
3	<Button intent="warning" mono>Monospaced</Button>

1	<Button small>Small Button</Button>
2	<Button>Normal Button</Button>
3	<Button large>Large Button</Button>

1	<Button icon="download">Download</Button>
2	<Button rightIcon="arrow-right">Continue</Button>
3	<Button icon="star" rightIcon="arrow-right">Favorite</Button>

1	<Button href="/learn/docs/getting-started/overview">Link Button</Button>
2	<Button disabled>Disabled Button</Button>