---
title: Button
airtableId: recEJyzUeMMXCjyTB
---
import { Button } from "@calcom/ui/components/button"
import { RenderComponentWithSnippet } from "@/app/components/render"
import { Row } from "@/app/components/row"
import { OnClickExample } from "./button.onClick"
import { VariantExample } from "./button.variant"
import { IconsExample } from "./button.icons"
import { LoadingExample } from "./button.loading"
import { DisabledExample } from "./button.disabled"
import { ButtonGroupExample,ButtonGroupSizes,ButtonGroupSizesCombined} from "./button.buttongroup"

## Variants and Colors

Buttons come in different variants and colors to suit different purposes. Each variant can be combined with any color and size.

<VariantExample/>

## Icons

Buttons can include icons at the start or end. The icon color and size are automatically handled by the button component.

<IconsExample/>

## Loading State

Buttons can show a loading state to indicate an ongoing action. The loading spinner replaces the button text while maintaining the button's width.

<LoadingExample/>

## Disabled State

Buttons can be disabled to indicate that they are not interactive. The disabled state is visually distinct and prevents any click events.

<DisabledExample/>

## onClick Events

Buttons handle click events like any other button component. You can provide an onClick handler to respond to user interactions.

<OnClickExample/>

Providing a loading state will add a spinner on the left side of the button.

<LoadingExample/>

## Disabled

<DisabledExample/>

## Button Groups

Buttons can be grouped together using the ButtonGroup component. The ButtonGroup component can be used to create a group of related buttons with consistent spacing and optional combined borders.

<ButtonGroupExample/>

### Button Group Sizes

#### Separated

<ButtonGroupSizes/>

#### Combined

<ButtonGroupSizesCombined/>

## Usage

```tsx
// Primary button (default)
<Button>Primary Button</Button>

// Secondary button
<Button color="secondary">Secondary Button</Button>

// Minimal button
<Button color="minimal">Minimal Button</Button>

// Destructive button
<Button color="destructive">Destructive Button</Button>

// With start icon
<Button StartIcon="plus">Add Item</Button>

// With end icon
<Button EndIcon="chevronRight">View More</Button>

// With link
<Button href="/some-path">Navigate</Button>

// Different sizes
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="base">Base (Default)</Button>
<Button size="lg">Large</Button>
```