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 | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'border' | 'tick' | 'disabled' | 'dimmed' | 'foreground' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | 'accent2' | 'accent2-up' | 'accent2-fg' | ... or use a custom template (external:id). Check the Icons page for more information. or | ||
backgroundColorHover | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'border' | 'tick' | 'disabled' | 'dimmed' | 'foreground' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | 'accent2' | 'accent2-up' | 'accent2-fg' | ... or use a custom template (external:id). Check the Icons page for more information. or | ||
foregroundColor | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'border' | 'tick' | 'disabled' | 'dimmed' | 'foreground' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | 'accent2' | 'accent2-up' | 'accent2-fg' | ... or use a custom template (external:id). Check the Icons page for more information. or | ||
foregroundColorHover | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'border' | 'tick' | 'disabled' | 'dimmed' | 'foreground' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | 'accent2' | 'accent2-up' | 'accent2-fg' | ... or use a custom template (external:id). Check the Icons page for more information. or | ||
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' | 'blend' | 'box' | 'cancel' | 'copyMarkdownEv' | 'circleBlocksEv' | 'chevronDown' | 'download' | 'draftingCompass' | 'chevronLeft' | 'chevronRight' | 'chevronsLeftRight' | 'circleCheck' | 'circleHelp' | 'circleX' | 'circleXEv' | ... or use a custom template (external:id). Check the Icons page for more information. | ||
iconRightName | 'arrowLeft' | 'arrowRight' | 'arrowUpRight' | 'arrowDown' | 'blocks' | 'blend' | 'box' | 'cancel' | 'copyMarkdownEv' | 'circleBlocksEv' | 'chevronDown' | 'download' | 'draftingCompass' | 'chevronLeft' | 'chevronRight' | 'chevronsLeftRight' | 'circleCheck' | 'circleHelp' | 'circleX' | 'circleXEv' | ... or use a custom template (external:id). Check the Icons page for more information. | ||
target | string | ||
isWide | boolean | ||
dataProps | Data props to pass to the Button. Example: \{ 'data-tally-open': 'xzxzxz' } | Record<string, any> | |
customClassName | Custom class names to pass to the Button. Example: 'custom-class' or 'custom-class-1 custom-class-2'. Custom class names are applied after the default class names. | string | |
to | Link target (path or template) | Object with properties:
| |
url | string | ||
disabled | boolean |
(*) Required.