Button
Trigger for actions
import { Button } from '@kalidao/reality'
name | type | default | description |
|---|---|---|---|
as | "button" | "a" | - | - |
center | boolean | - | Centers text and reserves space for icon and spinner |
justifyContent | ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>> | - | - |
loading | boolean | - | Shows loading spinner inside button |
prefix | ReactNodeNoStrings | - | Adds ReactNode before children |
ref | Ref<HTMLButtonElement> | - | - |
shape | "circle" | "square" | - | Constrains button to specific shape |
size | "large" | "small" | "medium" | large | Sets dimensions and layout |
suffix | ReactNodeNoStrings | - | Adds ReactNode after children |
tone | "background" | "blue" | "green" | "pink" | "purple" | "red" | "violet" | "foreground" | "accent" | accent | - |
variant | "transparent" | "primary" | "secondary" | "tertiary" | primary | - |
width | ConditionalStyle<Values<{ '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; screenSm: 640; ... 49 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
When variant is set to primary or secondary, you can tone to change the button accent color.
Optional center prop reserves space for affixes and loading spinner.