Button Showcase
Type
Is Text
Text
Text Align
Icon Position
Icon
Selected Type
Is Compressed
Is Pill
Is Uniform
Is Icon Background Tint
Is Icon Shimmyable
Is No Wrap
Is Word Break All
Is Success Animation
Is Disabled
Is Loading
Component Documentation
Component Name
Button
Builder Function Name
create_button_manager
Description
creates a fully customizable button with optional icon, interactive states, and configurable styling
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | primary | visual style of the button (primary, outlined, soft, plain) |
| support_icon | string | icon identifier to display; if null, no icon is shown | |
| is_icon_bg_tint | boolean | false | applies a tinted background behind the icon |
| icon_deg | number | 0 | deg rotation for the icon |
| icon_sw | number | 0 | icon stroke width setting |
| icon_size | number | 1.8 | icon size in rem units |
| icon_ml | number | 0 | icon's left margin in rem |
| icon_mr | number | 0 | icon's right margin in rem |
| icon_pos | string | right | icon position (left or right) |
| is_icon_shimmyable | boolean | false | whether icon can shimmy on hover |
| icon_movement_stiffness | number | 0.1 | movement stiffness for shimmy effect |
| icon_movement_damping | number | 0.1 | movement damping for shimmy effect |
| aria_label | string | aria-label for accessibility | |
| popover_target | string | css selector id for an associated popover | |
| href | string | renders the button as a native link when set, preserving right-click/copy-link behavior | |
| target | string | optional target attribute used when href is set | |
| rel | string | noopener noreferrer when target is _blank | optional rel attribute used when href is set |
| download | string or boolean | optional download attribute used when href is set | |
| is_no_wrap | boolean | false | prevents text from wrapping |
| is_word_break_all | boolean | false | forces text to break at any character |
| is_success_animation | boolean | false | if true, triggers a success animation/icon on click |
| ml | number | 0 | margin-left (rem) |
| mr | number | 0 | margin-right (rem) |
| mt | number | 0 | margin-top (rem) |
| mb | number | 0 | margin-bottom (rem) |
| pl | number | 1.1 | padding-left (rem) |
| pr | number | 1.1 | padding-right (rem) |
| pt | number | 0.3 | padding-top (rem) |
| pb | number | 0.3 | padding-bottom (rem) |
| border_radius | number | 1 | button border radius (rem) |
| tabindex | number | 0 | tabindex for focus navigation |
| is_prevent_default | boolean | false | prevents default on click event if true |
| is_stop_propagation | boolean | false | stops event propagation on click if true |
| min_height | number | 3.4 | minimum height of the button (rem) |
| fixed_width | number | fixed width in rem | |
| min_width | number | minimum width in rem | |
| is_compressed | boolean | false | if true, sets button width to auto |
| is_pill | boolean | false | if true, button is fully rounded |
| is_uniform | boolean | false | if true, forces button height == width |
| cursor | string | pointer | cursor style (pointer, move, etc.) |
| text_align | string | center | how to align button text: left, center, or right |
| font_size | number | 1.6 | font size in rem |
| line_height | number | 1.2 | line-height for text |
| font_weight | number | 400 | font weight (normal=400, bold=700, etc.) |
| text | string | text label for the button | |
| is_loading | boolean | false | if true, a loading spinner replaces icon/text |
| is_disabled | boolean | false | disables the button if true |
| selected_type | string | visual marker (selected or half_selected) appended to the style | |
| h | number | color hue index for advanced color customization | |
| c | number | color chroma index for advanced color customization | |
| l | number | color luminance index for advanced color customization | |
| color | string | button base color (if not using derived defaults) | |
| gradient_to_color | string | button gradient end color (if not using derived defaults) | |
| gradient_turn | number | 0.3 | turn value for the button's linear-gradient (0 to 1 is a full 360° turn) |
| contrast_color | string | text/icon color used on top of button background | |
| border_color | string | border color when type is outlined or a border is forced | |
| hover_shadow_color | string | transparent | shadow color on hover |
| hover_shadow_size | number | 1 | shadow size on hover |
| on_click | function | callback triggered upon button click | |
| on_hover | function | callback triggered on pointer enter/leave; receives true (enter) or false (leave) | |
| is_simulated_active | boolean | false | if true, button is forced into an active state for visual effect |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| success_trigger | triggers a success state, displaying success icon for ~1.4s | No Params | void |
| error_trigger | triggers an error state, displaying error icon for ~1.4s | No Params | void |
| icon_shimmy_trigger | manually triggers the icon's shimmy animation if is_icon_shimmyable | No Params | void |
| handle_click | internal click handler that runs callbacks, sets success animation, etc. | e: event | void |
| pointer_down | pointerdown event to set is_pointer_down to true | No Params | void |
| pointer_up | pointerup event to reset is_pointer_down to false | No Params | void |
| pointer_enter | pointerenter event to set is_hovered to true and invoke on_hover(true) | No Params | void |
| pointer_leave | pointerleave event to set is_hovered to false and invoke on_hover(false) | No Params | void |
| simulate_click | simulates a click, briefly showing the pressed state | No Params | void |
| focus | programmatically sets focus to the button element | No Params | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | unique identifier for this button instance |
| type | string | the derived style type (primary, outlined, etc.) |
| ml | number | margin-left in rem |
| mr | number | margin-right in rem |
| mt | number | margin-top in rem |
| mb | number | margin-bottom in rem |
| pl | number | padding-left in rem |
| pr | number | padding-right in rem |
| pt | number | padding-top in rem |
| pb | number | padding-bottom in rem |
| border_radius | number | button border radius in rem |
| is_loading | boolean | shows a loading spinner if true |
| is_pointer_down | boolean | true while pointer is pressed |
| is_prevent_default | boolean | if true, prevents default event in handle_click |
| is_stop_propagation | boolean | if true, stops event propagation in handle_click |
| tabindex | number | button tabindex for keyboard focus |
| is_disabled | boolean | true if the button is disabled |
| is_action_disabled | boolean | true while disabled, loading, success, or error state blocks action |
| selected_type | string | selected or half_selected style variant |
| is_hovered | boolean | true if pointer is hovering over the button |
| min_height | number | minimum height in rem |
| fixed_width | number | fixed button width in rem |
| min_width | number | minimum button width in rem |
| is_compressed | boolean | if true, sets width to auto |
| is_pill | boolean | true if button is pill shaped |
| is_uniform | boolean | true if button forces a uniform square shape |
| cursor | string | current cursor style |
| text_align | string | alignment for the text label |
| text | string | current text label of the button |
| is_success_animation | boolean | triggers success animation on click |
| font_size | number | font size in rem |
| line_height | number | text line-height |
| font_weight | number | text font-weight |
| color | string | base color for the button background |
| gradient_to_color | string | secondary color for a gradient background |
| gradient_turn | number | turn fraction for the linear gradient angle |
| contrast_color | string | color used for text or icons on top of background |
| border_color | string | border color if outlined or forced border is used |
| hover_shadow_color | string | shadow color on hover |
| hover_shadow_size | number | shadow size on hover |
| support_icon | string | the icon identifier the button is currently set to display |
| is_icon_bg_tint | boolean | true if there's a tinted background behind the icon |
| icon_deg | number | rotation in degrees for the icon |
| icon_sw | number | stroke width for the icon if applicable |
| icon_size | number | icon size in rem |
| icon_ml | number | icon left margin in rem |
| icon_mr | number | icon right margin in rem |
| icon_pos | string | icon position (left or right) |
| is_icon_shimmyable | boolean | true if icon shakes when hovered |
| icon_movement_stiffness | number | shimmy stiffness |
| icon_movement_damping | number | shimmy damping |
| aria_label | string | aria-label for accessibility |
| popover_target | string | id for associated popover element |
| href | string | native link href when the button renders as an anchor |
| target | string | native link target when href is set |
| rel | string | native link rel when href is set |
| download | string or boolean | native link download attribute when href is set |
| is_link | boolean | true when the button renders as an anchor |
| element_tag | string | the rendered element tag, either button or a |
| is_no_wrap | boolean | true if text should not wrap |
| is_word_break_all | boolean | true if text can break at any character |
| is_simulated_active | boolean | forces button into an active state visually |
| is_success | boolean | true if button is showing success state |
| is_error | boolean | true if button is showing error state |
| icon_manager | object | the internally created icon manager for this button |
