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.

Example

Props

Button props

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

Quick start

Use Button with label prop for actions:

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

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

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

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

Button with Icon

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

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

Loading state

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

* denotes required field

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

* denotes required field

SplitButton.MenuItem Props

Prop	Type	Default value	Description
Prop label	Type ReactNode	Default value undefined	Description Text or content to display as the menu item label
Prop icon	Type IconName	Default value undefined	Description Icon name to display in the menu item
Prop iconDir	Type "start" \| "end"	Default value "start"	Description 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
Prop options *	Type Array<{label: string, value: string}>	Default value []	Description Array of button options, each with a label and value. Required.
Prop type	Type "default" \| "borderless"	Default value "default"	Description Visual style variant of the button group
Prop selected	Type string	Default value undefined	Description Value of the currently selected button option
Prop fillWidth	Type boolean	Default value false	Description Whether the button group should take up the full width of its container

* denotes required field

Quick start

Button

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

IconButton

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

SplitButton

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

ButtonGroup

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

Common use cases

Form actions

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

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

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}
  />
)
}

Confirmation dialog Dropdown

Buttons

Example

Props

Button props

Quick start

Related components

Common use cases

Primary action

Button with Icon

Loading state

IconButton

IconButton Props

SplitButton

SplitButton Props

SplitButton.MenuItem Props

ButtonGroup

ButtonGroup Props

Quick start

Button

IconButton

SplitButton

ButtonGroup

Common use cases

Form actions

Icon actions

Filter buttons