Components · Actions
Button link icon
The quietest action: a borderless 32px icon at the lowest emphasis, for low-priority affordances like help, external links or inline tools. It renders in the Primary role and simply dims on hover — no fill, no border.
Preview
Build with the skill
No package to install — hand this to your AI to generate or migrate the component in your stack.
Apply the Zetta "Button link icon" component to this project using the zetta-design-md skill.
WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `button-link-icon` spec (variants: default, hover, disabled) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `button-link-icon` spec in this project's stack.
AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.
ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.Anatomy & rules
┌──────────────────┐
│ [icon] │ ← 32×32px anchor
└──────────────────┘
| State | Icon color | Notes |
|---|---|---|
| Default | {colors.primary} |
— |
| Hover | {colors.primary} at 75% opacity |
— |
| Focus | {colors.primary} + 2px solid {colors.border-focus} outline |
Keyboard only |
| Active | {colors.primary-active} |
Mouse down |
| Disabled | {colors.disabled-text} |
aria-disabled="true" |
When to use
- Icon-only navigation to another page or external resource.
When not to use
- When clicking triggers an action (submit, delete, open modal) — use Icon Button.
Do
- Always provide
aria-labelwith the destination or action ("View profile", "Open documentation"). - Add
rel="noopener noreferrer"when usingtarget="_blank".
aria-labelrequired: action verb matching destination, e.g. "Open settings", "View profile".- Tooltip must match
aria-label. - Use only for navigational actions — not for triggering commands.
Keyboard
| Key | Behavior |
|---|---|
Tab |
Move focus to the link |
Enter |
Follow the link destination |
Accessibility
- ARIA role: implicit
role="link"on<a>. Do not use<button>for navigation. - Required:
aria-label— the icon alone is not accessible.
Spec
Values and token references resolved straight from the Zetta spec.
button-link-icon
- backgroundColor
- transparent
- iconColor
- {colors.primary}
- borderColor
- transparent
- borderRadius
- {rounded.base}
- width
- 32px
- height
- 32px
- iconSize
- {icons.sizeMap.md}
- cursor
- pointer
- display
- flex
- alignItems
- center
- justifyContent
- center
button-link-icon-hover
- iconColor
- {colors.primary}
- opacity
- 0.75
button-link-icon-focus
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
button-link-icon-disabled
- iconColor
- {colors.disabled-text}
- cursor
- not-allowed
- pointerEvents
- none