Button

A button allows a user to perform an action, with mouse, touch, and keyboard interactions.

<Button>button</Button>

<Button>button</Button>

Installation

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Options

Variant

Use the variant prop to control the visual style of the button.
The default variant is "primary".

<Button variant="primary" size="md">Button</Button>
<Button variant="hint" size="md">Button</Button>
<Button variant="blue" size="md">Button</Button>
<Button variant="soft-blue" size="md">Button</Button>
<Button variant="red" size="md">Button</Button>
<Button variant="red-fill" size="md">Button</Button>
<Button variant="link" size="md">Button</Button>

<Button variant="primary" size="md">Button</Button><Button variant="hint" size="md">Button</Button><Button variant="blue" size="md">Button</Button><Button variant="soft-blue" size="md">Button</Button><Button variant="red" size="md">Button</Button><Button variant="red-fill" size="md">Button</Button><Button variant="link" size="md">Button</Button>

Size

Use the size prop to control the size of the button.

<Button size="xs">Button</Button>
<Button size="sm">Button</Button>
<Button size="md">Button</Button>
<Button size="lg">Button</Button>

<Button size="xs">Button</Button><Button size="sm">Button</Button><Button size="md">Button</Button><Button size="lg">Button</Button>

Examples

Hint

<Button variant="hint" size="xs">
  <CircleHelp className="mr-1.5 size-3.5" />
  Learn more about this feature
</Button>

<Button variant="hint" size="xs">  <CircleHelp className="mr-1.5 size-3.5" />  Learn more about this feature</Button>

Warning

<Button variant="red" size="md">Delete this project</Button>

<Button variant="red" size="md">Delete this project</Button>

Nav Icon

<Button variant="nav-icon">
  <MessageSquareIcon />
</Button>

<Button variant="nav-icon">  <MessageSquareIcon /></Button>

Icon Button

<Button variant="icon">
  <BoldIcon />
</Button>

<Button variant="icon">  <BoldIcon /></Button>

Disabled

<Button disabled size="md">
  <RefreshCw /> Please wait
</Button>

<Button disabled size="md">  <RefreshCw /> Please wait</Button>

API Reference

Button

An Button extends the HTML <button> component. We list the extended properties only.

Prop	Type	Default	Description
`variant`	`"primary" \| "icon" \| "link \| "blue" \| "soft-blue" \| "hint" \| "red" \| "red-fill" \| "white" \| "close" \| null`	`"primary"`	The visual style of the button.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "circle" \| null`	`null`	The size of the button.

Button

On this page