Components · Actions

Button link

A text-only action styled as an inline link — brand-coloured, underlined with a 4px offset, no fill or border. Use it for low-emphasis or navigational actions that sit inside running text or beside a primary button.

Preview

Light

View documentation open_in_new Open in new tab

Dark

View documentation open_in_new Open in new tab

Accessibility

View documentation open_in_new Open in new tab

Spec

Values and token references straight from the Zetta spec.

button-link

backgroundColor: transparent
textColor: {colors.brand}
borderColor: transparent
fontFamily: Geist
fontSize: 14px
fontWeight: 500
lineHeight: 1.4
height: 32px
paddingX: 0
gap: 8px
iconSize: {icons.sizeMap.sm}
textDecoration: underline
textUnderlineOffset: 4px
cursor: pointer

button-link-hover

opacity: 0.75
textDecoration: none

button-link-focus

outline: 2px solid {colors.border-focus}
outlineOffset: 2px

button-link-disabled

textColor: {colors.disabled-text}
opacity: 0.5
textDecoration: none
cursor: not-allowed
pointerEvents: none

Build with the skill

No package to install — hand this to your AI to generate the button link in your stack.

Prompt for your AI

Implement the Zetta "Button link" component in this project's stack using the zetta-design-md skill.

- Apply the `button-link` spec from the skill (variants: default, hover, disabled).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

Transparent fill, brand text, underline at 4px offset, no horizontal padding; hover drops to 0.75 opacity and removes the underline. Same 2px focus ring as every button.
If the action navigates, render a real <a>; if it performs an in-page action, render a <button> styled as a link. Don't stack several beside each other where a menu would read better.

Accessibility

Keep the underline so the link is distinguishable without relying on colour alone. Disabled links set pointer-events: none and drop to 0.5 opacity.