Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Primitives
  2. Link
  3. API and Development

Link

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
Import Link, LinkAppearance, LinkUnderline from @prepared911/ui/link.
See LinkProps in src/components/link/props.ts and the signed CONTRACT.md.
Props
PropDefaultMeaning
hrefNavigation target.
underlineLinkUnderline.AlwaysUnderline behavior for text links.
classNameConsumers do not pass className; use Link props or find-pattern.
refRef to the rendered anchor.
appearanceLinkAppearance.TextText link paint.
intentButtonIntent.NeutralButton intent.
variantButtonVariant.SoftButton surface.
sizeButtonSize.LargeControl size.
childrenVisible content inside the anchor.
iconGlyph to render.
labelAccessible name for the icon-only link.
externalOpens in a new browsing context with rel="noopener noreferrer".
newTabLabelAnnounced after the link name (for example, opens in a new tab).
Props
NameTypeDefaultDescription
hrefstring—Navigation target.
activeundefined——
appearanceLinkAppearanceLinkAppearance.TextText link paint. Button paint from shared recipes.
aria-controlsstring—Id of the element controlled by this control.
aria-currentboolean | "false" | "true" | "page" | "step" | "location" | "date" | "time"—Whether this item is current within a set.
aria-describedbystring—Id of the element that describes this control.
aria-descriptionLocalizedMessage—Accessible description when it cannot be referenced by id. Extended description for assistive tech.
aria-expandedboolean—Whether the controlled region is expanded.
aria-haspopupboolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog"—Type of popup triggered by this control, if any.
aria-label(string & { readonly [LOCALIZED_MESSAGE_BRAND]: true; } & (LocalizedMessage | DisplayValue))—Accessible name when the visible label is insufficient.
aria-labelledbystring—Id of the element that names this control.
aria-placeholderLocalizedMessage—Hint for an empty control.
childrenReactNode—Visible content inside the anchor.
classNamestring—@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
disabledboolean—Inert state per host: native disabled on a button; on Link, ADR 0006 link host (no href, aria-disabled="true", tabIndex={0}). Never tabIndex={-1}.
externalboolean—Opens in a new browsing context with rel="noopener noreferrer".
fullSpanbooleanfalseIcon-only controls always hug; fill is not available. When true, the link fills the available inline size of its parent (inline-size: 100%). Only the inline axis fills; block size stays at the control token in every host.
iconGlyph—Glyph to render.
idstring—Element id for ARIA relationships.
intentButtonIntentButtonIntent.NeutralButton intent.
labelLocalizedMessage—Accessible name for the icon-only link.
newTabLabelLocalizedMessage—Announced after the link name (for example, opens in a new tab).
refRef<HTMLAnchorElement>—Ref to the rendered anchor.
sizeButtonSizeButtonSize.LargeControl size.
softFillButtonSoftFillButtonSoftFill.OutlineFill for {@link ButtonVariant.Soft}. See {@link ButtonSoftFill}.
titleLocalizedMessage | DisplayValue—Native tooltip; accessibility hint, not visible UI title text.
underlineLinkUnderlineLinkUnderline.AlwaysUnderline behavior for text links.
variantButtonVariantButtonVariant.SoftButton surface.
Storybook
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
Previous
Link / Usage
Next
Link / Accessibility
On this page
Props
Props
Storybook