---
title: Buttons
description: Buttons are used to trigger singular, clear actions, like submitting a form or starting a process.
category: Actions
related: [IconButton, SplitButton, ButtonGroup, Container, Dialog]
commonPatterns: [form-submit, action-button, icon-button, split-action]
---

Source: https://clickhouse.design/click-ui/buttons

# Buttons

Buttons are used to trigger singular, clear actions, like submitting a form or starting a process. You can define the styles and sizes of each button used across the ClickHouse ecosystem.

Before reaching for `disabled`, see [Availability states](/click-ui/availability) — it covers when to disable versus hide a button, and why a disabled button with a tooltip needs `aria-disabled` instead.

## Example

## Props

### Button props

| Prop                 | Type                                              | Default value | Description                                                        |
| -------------------- | ------------------------------------------------- | ------------- | ------------------------------------------------------------------ |
| label                | `string`                                          | `undefined`   | The text label displayed on the button                             |
| type                 | `"primary" \| "secondary" \| "empty" \| "danger"` | `"primary"`   | Visual style variant of the button                                 |
| iconLeft             | `IconName`                                        | `undefined`   | Icon name to display on the left side of the button label          |
| iconRight            | `IconName`                                        | `undefined`   | Icon name to display on the right side of the button label         |
| align                | `"center" \| "left"`                              | `"center"`    | Horizontal alignment of button content                             |
| fillWidth            | `boolean`                                         | `false`       | Whether the button should take up the full width of its container  |
| loading              | `boolean`                                         | `false`       | Whether the button is in a loading state, showing a spinner        |
| showLabelWithLoading | `boolean`                                         | `false`       | Whether to show the button label alongside the loading spinner     |
| autoFocus            | `boolean`                                         | `false`       | Whether the button should automatically receive focus when mounted |
| onClick              | `() => void`                                      | `undefined`   | Callback function called when the button is clicked                |

```tsx
import {Button} from '@clickhouse/click-ui'

<Button 
type="primary" 
label="Click me"
iconLeft="plus"
onClick={() => console.log("button clicked")}
/>
```

## Quick start

Use Button with label prop for actions:

```tsx
<Button type='primary' label='Submit' onClick={handleSubmit} />
<Button type='secondary' label='Cancel' />
<Button label='Action' iconLeft='plus' />
```

## Related components

- **IconButton**: Use for icon-only buttons
- **SplitButton**: Use for buttons with dropdown menus
- **ButtonGroup**: Use to group related buttons
- **Container**: Use Container to layout multiple buttons
- **Dialog**: Use Button with Dialog.Trigger to open dialogs

## Common use cases

### Primary action

```tsx
import { Button } from '@clickhouse/click-ui'

function PrimaryAction() {
return (
  <Button type='primary' label='Save' onClick={handleSave} />
)
}
```

### Button with Icon

```tsx
import { Button } from '@clickhouse/click-ui'

function ButtonWithIcon() {
return (
  <Button 
    type='primary' 
    label='Add' 
    iconLeft='plus' 
    onClick={handleAdd} 
  />
)
}
```

### Loading state

```tsx
import { Button } from '@clickhouse/click-ui'
import { useState } from 'react'

function LoadingButton() {
const [loading, setLoading] = useState(false)

return (
  <Button 
    type='primary' 
    label='Submit' 
    loading={loading}
    onClick={async () => {
      setLoading(true)
      await handleSubmit()
      setLoading(false)
    }}
  />
)
}
```

## IconButton

An icon button is used for quick actions, represented by an icon instead of text, like closing a window or sharing content.

### IconButton Props

| Prop     | Type                                                        | Default value | Description                                              |
| -------- | ----------------------------------------------------------- | ------------- | -------------------------------------------------------- |
| icon \*  | `IconName`                                                  | `undefined`   | Icon name to display in the button. Required.            |
| type     | `"primary" \| "secondary" \| "ghost" \| "info" \| "danger"` | `"primary"`   | Visual style variant of the icon button                  |
| size     | `"xs" \| "sm" \| "default"`                                 | `"default"`   | Size variant of the icon button                          |
| disabled | `boolean`                                                   | `false`       | Whether the button is disabled and cannot be clicked     |
| onClick  | `() => void`                                                | `undefined`   | Callback function called when the icon button is clicked |

```tsx
import {IconButton} from '@clickhouse/click-ui'

<IconButton 
type="primary" 
icon="plus"
onClick={() => console.log("iconButton clicked")}
/>
```

## SplitButton

Split buttons provide a main action that takes up most of the space, along with a dropdown menu for related secondary actions.

### SplitButton Props

| Prop      | Type                          | Default value | Description                                                             |
| --------- | ----------------------------- | ------------- | ----------------------------------------------------------------------- |
| menu \*   | `Array<SplitButton.MenuItem>` | `[]`          | Array of menu items to display in the dropdown. Required.               |
| type      | `"primary" \| "secondary"`    | `"primary"`   | Visual style variant of the split button                                |
| icon      | `IconName`                    | `"arrowDown"` | Icon name to display in the dropdown trigger button                     |
| iconDir   | `"start" \| "end"`            | `"start"`     | Direction/position of the icon relative to the button content           |
| disabled  | `boolean`                     | `false`       | Whether the split button is disabled and cannot be clicked              |
| fillWidth | `boolean`                     | `false`       | Whether the split button should take up the full width of its container |
| side      | `"top" \| "bottom"`           | `"top"`       | Side of the button where the dropdown menu should appear                |
| onClick   | `() => void`                  | `undefined`   | Callback function called when the main button is clicked                |

```tsx
import {SplitButton} from '@clickhouse/click-ui'

<SplitButton 
type='secondary'
menu={[
  {label: "Create"}, 
  {label: "Edit"}, 
  {label: "Delete", icon:"trash"}
]}
onClick={() => console.log("splitButton clicked")}
>
Click me
</SplitButton>
```

### SplitButton.MenuItem Props

| Prop    | Type               | Default value | Description                                                    |
| ------- | ------------------ | ------------- | -------------------------------------------------------------- |
| label   | `ReactNode`        | `undefined`   | Text or content to display as the menu item label              |
| icon    | `IconName`         | `undefined`   | Icon name to display in the menu item                          |
| iconDir | `"start" \| "end"` | `"start"`     | Direction/position of the icon relative to the menu item label |

## ButtonGroup

A ButtonGroup groups multiple related buttons together, often to visually indicate their connection or to manage space efficiently.

### ButtonGroup Props

| Prop       | Type                                    | Default value | Description                                                             |
| ---------- | --------------------------------------- | ------------- | ----------------------------------------------------------------------- |
| options \* | `Array<{label: string, value: string}>` | `[]`          | Array of button options, each with a label and value. Required.         |
| type       | `"default" \| "borderless"`             | `"default"`   | Visual style variant of the button group                                |
| selected   | `string`                                | `undefined`   | Value of the currently selected button option                           |
| fillWidth  | `boolean`                               | `false`       | Whether the button group should take up the full width of its container |

```tsx
import {ButtonGroup} from '@clickhouse/click-ui'

<ButtonGroup
options={[
  {label: "Option 1", value: "1"},
  {label: "Option 2", value: "2"}
]}
selected='1'
/>
```

## Quick start

### Button

```tsx
<Button type='primary' label='Submit' onClick={handleSubmit} />
<Button label='Action' iconLeft='plus' />
```

### IconButton

```tsx
<IconButton type='primary' icon='plus' onClick={handleClick} />
<IconButton type='danger' icon='trash' />
```

### SplitButton

```tsx
<SplitButton 
menu={[{label: "Edit"}, {label: "Delete", icon:"trash"}]}
onClick={handleMainAction}
>
Create
</SplitButton>
```

### ButtonGroup

```tsx
<ButtonGroup
options={[
  {label: "All", value: "all"},
  {label: "Active", value: "active"}
]}
selected='all'
/>
```

## Common use cases

### Form actions

```tsx
import { Button, Container } from '@clickhouse/click-ui'

function FormActions() {
return (
  <Container orientation='horizontal' gap='sm' justifyContent='end'>
    <Button label='Cancel' onClick={handleCancel} />
    <Button type='primary' label='Save' onClick={handleSave} />
  </Container>
)
}
```

### Icon actions

```tsx
import { IconButton, Container } from '@clickhouse/click-ui'

function IconActions() {
return (
  <Container orientation='horizontal' gap='sm'>
    <IconButton type='primary' icon='plus' onClick={handleAdd} />
    <IconButton type='danger' icon='trash' onClick={handleDelete} />
  </Container>
)
}
```

### Filter buttons

```tsx
import { ButtonGroup } from '@clickhouse/click-ui'
import { useState } from 'react'

function FilterButtons() {
const [filter, setFilter] = useState('all')

return (
  <ButtonGroup
    options={[
      {label: "All", value: "all"},
      {label: "Active", value: "active"}
    ]}
    selected={filter}
    onChange={setFilter}
  />
)
}
```