• Docs
  • Components
  • Blocks
  • Admin
CtrlK
Get Started
  • Introduction
  • Setup
  • CLI
  • VS Code Extension
  • Figma Code Connect
  • MCP Server
  • llms.txt
  • Changelog
Foundations
  • Design Tokens
  • Theming & Modes
  • Semantic Colors
  • Spacing
  • Typography
Testing
  • Test Guide
  • Performance Tests
  • Visual Regression
Components
  • Accordion
  • Activity Feed
  • Alert
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Card
  • Carousel
  • Checkbox
  • Collapsible
  • Combobox
  • Command Palette
  • Context Menu
  • Date Picker
  • Dialog
  • Dropdown Menu
  • File Upload
  • Hover Card
  • Input
  • Kbd
  • Label
  • Menubar
  • Metric Card
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Quick Actions
  • Radio
  • Rating
  • Resizable
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Skeleton
  • Slider
  • Spinner
  • Split Button
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree View
Blocks
  • Activity Feed
  • App Shell
  • Authentication Block
  • Benefits Section
  • Cta Section
  • Data Table
  • Empty State
  • Faq Section
  • Feature Grid Section
  • Footer Section
  • Hero Section
  • Kpi Dashboard
  • Kpi Strip
  • Link Card
  • Metric Card
  • Navigation Header
  • Pagination Footer
  • Pricing Table
  • Quick Actions
  • Settings Screen
Resources
  • API Reference
BreadcrumbsCard
BreadcrumbsCard
BreadcrumbsCard

Button

Trigger actions or submit forms.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13

Install

Size

1
2
3
4
5
6
7
8
9
10
11

Variants

1
2
3
4
5
6
7
8
9
10
11
12

Icon

1
2
3
4
5
6
7
8
9
10

With Icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Radius

1
2
3
4
5
6
7
8
9
10
11
12
13

Rounded

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Spinner

1
2
3
4
5
6
7
8
9
10
11
12

Button Group

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Disabled

1
2
3
4
5
6
7
8
9
10
11
12

API Reference

PropTypeDefaultDescription
variant
"solid""outline""ghost""secondary"
"solid"Visual style variant of the button
size
"sm""md""lg"
"md"Size of the button
radius
"none""sm""md""lg""full"
"sm"Border radius of the button
leadingIconReact.ReactNode—Icon displayed before the button text
trailingIconReact.ReactNode—Icon displayed after the button text
loadingbooleanfalseShows loading spinner and disables the button
loadingTextstring—Custom text to display when loading (overrides children)
disabledbooleanfalseDisables the button
childrenReact.ReactNode—Button text content (required)
classNamestring—Additional CSS classes