calendar/apps/ui-playground/content/design/components/button.mdx

---
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

#### Seperated

<ButtonGroupSizes/>

#### Combined

<ButtonGroupSizesCombined/>