Envisioning App Blocks
ButtonBlock
ButtonBlock
ButtonBlock
ButtonBlock
Object containing the following properties:
| Property | Description | Type | Default |
|---|---|---|---|
block (*) | must be ButtonBlock | 'ButtonBlock' | |
id | string | 'ButtonBlock' | |
mainLabel (*) | Button label (supports templates) | string | Record<string, string> | string | |
maxWidth | number | ||
extraLabel | string | Record<string, string> | string | ||
mainLabelSize | 'lg' | 'md' | 'sm' | 'xs' | ||
backgroundColor | 'context' | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'background' | 'background-plus' | 'background-dimmed' | 'background-disabled' | 'border' | 'foreground' | 'disabled' | 'dimmed' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | ... | never | ||
backgroundColorHover | 'context' | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'background' | 'background-plus' | 'background-dimmed' | 'background-disabled' | 'border' | 'foreground' | 'disabled' | 'dimmed' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | ... | never | ||
foregroundColor | 'context' | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'background' | 'background-plus' | 'background-dimmed' | 'background-disabled' | 'border' | 'foreground' | 'disabled' | 'dimmed' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | ... | never | ||
foregroundColorHover | 'context' | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'background' | 'background-plus' | 'background-dimmed' | 'background-disabled' | 'border' | 'foreground' | 'disabled' | 'dimmed' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | ... | never | ||
addWrapper | boolean | ||
wrapperClassName | string | ||
alignment | 'center' | 'left' | 'right' | ||
variant | 'default' | 'destructive' | 'disabled' | 'outline' | 'invisible' | ||
size | 'sm' | 'md' | 'lg' | 'xl' | 'icon' | 'neutral' | ||
format | 'default' | 'pill' | ||
iconLeftName | 'arrowLeft' | 'arrowRight' | 'arrowUpRight' | 'arrowDown' | 'blocks' | 'box' | 'cancel' | 'copyMarkdownEv' | 'chevronDown' | 'download' | 'draftingCompass' | 'chevronLeft' | 'chevronRight' | 'chevronsLeftRight' | 'circleCheck' | 'circleHelp' | 'circleX' | 'circleXEv' | 'circle' | 'circleSmall' | ... | never | ||
iconRightName | 'arrowLeft' | 'arrowRight' | 'arrowUpRight' | 'arrowDown' | 'blocks' | 'box' | 'cancel' | 'copyMarkdownEv' | 'chevronDown' | 'download' | 'draftingCompass' | 'chevronLeft' | 'chevronRight' | 'chevronsLeftRight' | 'circleCheck' | 'circleHelp' | 'circleX' | 'circleXEv' | 'circle' | 'circleSmall' | ... | never | ||
target | string | ||
isWide | boolean | ||
customProps | Custom props to pass to the button | Record<string, any> | |
to | Link target (path or template) | Object with properties:
| |
url | string | ||
disabled | boolean |
(*) Required.