FluxButton

A clickable button that dispatches a server action. Use tone=primary for the single call-to-action per surface; tone=danger for destructive operations; tone=neutral elsewhere.

Extends: Button (a2ui/basic@0.10)

Category: primitive

Props

Name

Type

Required

Default

accessibility

object

yes

``

action

object

yes

``

component

'FluxButton'

yes

``

disabled

boolean

no

``

emphasis

'solid' | 'soft' | 'outline' | 'ghost'

yes

'solid'

id

string

yes

``

label

string

no

``

leadingIcon

string

no

``

loading

boolean

no

``

size

'sm' | 'md' | 'lg'

yes

'md'

tone

'neutral' | 'primary' | 'danger' | 'success'

yes

'neutral'

trailingIcon

string

no

``

Examples

Standard primary CTA.

UI.button("Save", tone="primary", size="md", action="save_form")

Destructive outline button.

UI.button("Delete", tone="danger", emphasis="outline", action="confirm_delete")

Ghost secondary action.

UI.button("Undo", tone="neutral", emphasis="ghost", size="sm", action="undo")

Anti-patterns

Avoid: Only one primary CTA per surface. Second button should be tone=neutral.

UI.row([UI.button("Save", tone="primary"), UI.button("Ship", tone="primary")])

Avoid: Every FluxButton requires a non-empty action.

UI.button("Click me")   # no action

Avoid: tone=danger signals destructive intent. Don’t use it for confirmations.

UI.button("OK", tone="danger")   # non-destructive copy

Tokens used

  • $color.bg.subtle

  • $color.border.default

  • $color.border.focus

  • $color.danger.solid

  • $color.danger.subtle

  • $color.primary.solid

  • $color.primary.solidHover

  • $color.primary.subtle

  • $color.primary.subtleHover

  • $color.success.solid

  • $color.text.danger

  • $color.text.muted

  • $color.text.onBrand

  • $color.text.primary

  • $motion.duration.fast

  • $motion.easing.standard

  • $radius.lg

  • $radius.md

  • $shadow.focus

  • $shadow.sm

  • $space.2

  • $space.3

  • $space.4

  • $typography.size.lg

  • $typography.size.md

  • $typography.size.sm

  • $typography.weight.medium

Basic-catalog fallback

  • Component: Button

  • Prop map: action → action, label → child, tone → variant

  • Notes: Basic renderers lose size + emphasis + tone=success; degrades to primary or default variant only. Labels are wrapped in a generated Text child at compile time.