FluxLink

An inline hyperlink. Set href for navigation or action for an auth-gated / custom dispatch — never both. Use external=True for off-surface URLs so the renderer adds the external-link affordance and rel=noopener.

Extends: Text (a2ui/basic@0.10)

Category: primitive

Props

Name	Type	Required	Default
accessibility	object	no	``
action	object	no	``
component	'FluxLink'	yes	``
external	boolean	no	``
href	string	no	``
id	string	yes	``
label	string	yes	``
tone	'default' | 'muted' | 'danger'	yes	'default'
underline	'always' | 'hover' | 'never'	yes	'hover'

Examples

Internal navigation.

UI.link("Pricing", href="/pricing")

External link with external-icon affordance.

UI.link("Read the docs", href="https://docs.example.com", external=True)

Action-based link that triggers a server event instead of navigating.

UI.link("Sign in to continue", action="open_auth_modal", tone="default")

Anti-patterns

Avoid: A link has exactly one destination. Pick either href (navigate) or action (dispatch).

UI.link("Buy", href="/checkout", action="buy")

Avoid: Empty href renders a broken anchor. Use action when there is no URL.

UI.link("Click here", href="")

Tokens used

• $color.danger.solidHover

• $color.primary.solidHover

• $color.text.danger

• $color.text.link

• $color.text.muted

• $motion.duration.fast

• $motion.easing.standard

• $space.0_5

• $typography.weight.medium

Basic-catalog fallback

• Component: Text

• Prop map: label → text

• Notes: Basic catalog has no Link component; renderers degrade to inline Text with the label visible and the destination lost. The fluent guard warns when a FluxLink falls back to basic.