Button
To trigger an operation.
When to use
A button means an operation or series of operations. Clicking it triggers the corresponding business logic. Use one primary button for the main action, default buttons for ordinary actions, dashed buttons for adding actions, text buttons for secondary actions, and link buttons for links.
danger, ghost, disabled, and loading refine those action states without changing the button
contract.
Examples
Sizes
small, middle (the default), and large map to --cb-control-height-sm, --cb-control-height-md,
and --cb-control-height-lg. Each is max() of a preferred step (--cb-control-height-base-*) and
the active pointer floor, so a density scale can retune the ladder but never take a control under its
floor. On a coarse pointer — a touch screen — --cb-control-floor becomes
--cb-control-floor-coarse (2.75rem, 44px), so small and middle both reach 44px and large keeps
its 48px, with no per-control CSS. A pointer that hovers keeps --cb-control-floor-fine (2rem, 32px).
API
Button and ButtonProps are exported from @ceebee/ui/client.
Button
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
autoInsertSpace | We add a space between two Chinese characters by default, which removed by setting autoInsertSpace to false. | boolean | true | 5.17.0 |
block | Option to fit button width to its parent width | boolean | false | — |
classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 |
color | Set button color | default | primary | danger | PresetColors | primary when variant="solid" | default, primary and danger: 5.21.0, PresetColors: 5.23.0, solid default color: 6.4.0 |
danger | Syntactic sugar. Set the danger status of button. will follow color if provided | boolean | false | — |
disabled | Disabled state of button | boolean | false | — |
ghost | Make background transparent and invert text and border colors | boolean | false | — |
href | Redirect url of link button | string | - | — |
htmlType | Set the original html type of button, see: MDN | submit | reset | button | button | — |
icon | Set the icon component of button | ReactNode | - | — |
iconPlacement | Set the icon position of button | start | end | start | - |
iconPosition | Set the icon position of button, please use iconPlacement instead | start | end | start | 5.17.0 |
loading | Set the loading status of button | boolean | { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
loadingIcon | (Only supports global configuration) Set the loading icon of button | ReactNode | <LoadingOutlined /> | — |
onClick | Set the handler to handle click event | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | — |
shape | Can be used to set button shape | default | circle | round | default | — |
size | Set the size of button | large | medium | small | medium | — |
styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 |
target | Same as target attribute of a, works when href is specified | string | - | — |
type | Syntactic sugar. Set button type. Will follow variant & color if provided | primary | dashed | link | text | default | default | — |
variant | Set button variant | outlined | dashed | solid | filled | text | link | - | 5.21.0 |