components / global
action button
ActionButton is the base DS control for compact calls to action. It normalizes button versus link rendering, supports icon-led states, and keeps every app on the same size and state model.
| field | value |
| group | global |
| import | @arieare/ds |
| source | packages/ds/src/components/button/ActionButton.tsx
packages/ds/src/components/button/button.css |
component tokens
| token | source | description |
--btn-h / --btn-px / --btn-py | @arieare/ds/tokens.css | Controls button height and padding across text, text-icon, and icon-only variants. |
--btn-border-* / --btn-bg-* / --btn-ink-* | @arieare/ds/tokens.css | Idle, hover, active, and disabled color tokens for the shared action contract. |
--btn-icon-size | @arieare/ds/tokens.css | Sets icon sizing for icon-bearing button variants. |
props
| prop | type | default | description |
label | string | — | Visible label text and icon-only accessible fallback. |
variant | "text" | "text-icon" | "icon-only" | "icon-text" | "text" | Chooses the visual button shape; icon-text is normalized to text-icon. |
iconClass | string | "" | CSS classes applied to the generated icon element. |
iconSvg | string | — | Inline SVG markup used instead of iconClass for bespoke icons. |
leftIcon | ReactNode | — | Explicit icon node rendered before the label. |
iconScale / iconOffsetX / iconOffsetY | number | 1 / 0 / 0 | Adjusts inline SVG scale and position for custom icons. |
href | string | — | When provided, renders an anchor instead of a button. |
external | boolean | false | Adds safe target and rel defaults for external links. |
active / disabled | boolean | false | Applies active or disabled visual state and interaction behavior. |
ariaLabel / className / children | string | ReactNode | — | Overrides accessible naming, extra classes, or inline button content. |
...button attributes | ButtonHTMLAttributes<HTMLButtonElement> | — | Passes native button attributes and event handlers through to the rendered button. |
...anchor attributes | AnchorHTMLAttributes<HTMLAnchorElement> | — | Passes native anchor attributes through when the component renders as a link. |