Axon 911 Frontend DocsAxon 911 Frontend Docs
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.
classNameClasses appended after generated classes.
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-labelLocalizedMessage—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—Classes appended after generated classes.
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".
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.
titleLocalizedMessage—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