99 lines
2.5 KiB
Plaintext
99 lines
2.5 KiB
Plaintext
---
|
|
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>
|
|
```
|