Buttons
Basic button
Buttons are used to trigger singlular, 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.
Prop | Type | Default value |
|---|---|---|
Prop label | Type string | Default value primary |
Prop type | Type "primary", "secondary", "empty", "danger" | Default value "primary" |
Prop iconLeft | Type | Default value |
Prop iconRight | Type | Default value |
Prop align | Type "center", "left" | Default value "center" |
Prop fillWidth | Type boolean | Default value false |
Prop loading | Type boolean | Default value false |
Prop showLabelWithLoading | Type boolean | Default value false |
Prop autofocus | Type boolean | Default value false |
Prop onClick | Type (value: string) => void | Default value |
Icon button
An icon button is used for quick actions, represented by an icon instead of text, like closing a window or sharing content. We try to only use icon buttons when the icon in question is globally recognisable.
Prop | Type | Default value |
|---|---|---|
Prop icon * | Type | Default value "users" |
Prop type | Type "primary", "secondary", "ghost", "info", "danger" | Default value "primary" |
Prop size | Type "xs", "sm", "default" | Default value "default" |
Prop disabled | Type boolean | Default value false |
Prop onClick | Type (value: string) => void | Default value |
* denotes required field
Split button
Split buttons provide a main action that takes up most of the space, along with a dropdown menu for related secondary actions.
Prop | Type | Default value |
|---|---|---|
Prop menu * | Type | Default value "users" |
Prop type | Type "primary", "secondary" | Default value "primary" |
Prop icon | Type | Default value "arrowDown" |
Prop iconDir | Type "start" | "end" | Default value "start" |
Prop disabled | Type boolean | Default value false |
Prop fillWidth | Type boolean | Default value false |
Prop side | Type "top" | "bottom" | Default value "top" |
Prop onClick | Type (value: string) => void | Default value |
* denotes required field
SplitButton.MenuItem
The items that exist within the SplitButton menu have their own set of options available. MenuItems can also be parents to submenus, each with their own set of MenuItems.
Prop | Type | Default value |
|---|---|---|
Prop label | Type ReactNode | Default value "primary" |
Prop icon | Type | Default value |
Prop iconDir | Type "start" | "end" | Default value "start" |
Button group
A ButtonGroup groups multiple related buttons together, often to visually indicate their connection or to manage space efficiently. It helps users quickly understand and access grouped actions without cluttering the interface.
Prop | Type | Default value |
|---|---|---|
Prop options * | Type Array [label:value] | Default value |
Prop type | Type "default", "borderless" | Default value "default" |
Prop selected | Type string | Default value |
Prop fillWidth | Type boolean | Default value false |
* denotes required field