Action link
Action link
Give a navigation destination clear priority. This preview documents the action links already used by the Intuise website; it is not a released component package.
Implementation preview
Both examples navigate to the Components overview.
Purpose
Give a navigation destination clear priority. This preview documents the action links already used by the Intuise website; it is not a released component package.
When to use
Use for a clear next destination such as exploring a service or opening an email enquiry.
When not to use
Do not use a link to submit a form, toggle a state, or open an in-page disclosure. Use a native button for actions.
Anatomy
A native anchor with a real href, a descriptive visible label, and an optional decorative directional arrow.
Variants
Signal uses the brand accent for a primary destination. Dark works on light surfaces. Secondary is reserved for dark surfaces.
States
Default, hover, keyboard focus, and activated navigation. Links have no native disabled state; omit unavailable destinations and explain availability in text. No loading state is implemented in this preview.
Responsive behavior
Links size to their labels on wide screens and fill the available action group on narrow screens. Labels wrap without fixed heights.
Touch behavior
The existing button class provides a 3.25rem minimum height. Keep adjacent destinations separated and do not rely on hover to reveal the label.
Desktop behavior
Tab focuses the anchor and Enter follows its destination. Hover feedback supplements the visible label. The action group can remain inline when space permits.
Inputs and props
Native anchor attributes: href is required for navigation; class selects button plus a documented visual variant. This CSS primitive has no component-specific JavaScript props.
Outputs and events
Native browser navigation and standard anchor events only. No custom events are emitted.
Slots and content regions
Visible descriptive link text and an optional decorative arrow marked aria-hidden. There is no framework-specific slot API.
Dependencies
Website tokens.css and the button rules in global.css. No runtime JavaScript or framework dependency is required by this CSS primitive.
Examples
<a class="button button-signal" href="/components/">Explore components</a>. The live preview above uses the same destination and CSS classes.
Limitations
A website preview, not a distributed component package. Disabled and loading behavior are not implemented. Responsive stacking depends on the surrounding action-group layout.
Incompatibilities
Do not nest interactive elements inside the anchor or apply button-only behaviors to it. Secondary styling is intended for dark surfaces and must not be used on light backgrounds without a contrast review.
Migration notes
No package migration path exists yet. Preserve href, accessible text, focus styles, token dependencies, and reduced-motion behavior when porting this primitive to another framework.
Accessibility
Use an anchor for navigation, a meaningful label, and a visible focus indicator. Decorative arrows are aria-hidden. Signal colors need dark text. The preview uses a deeper teal focus ring on light surfaces. No formal accessibility certification is claimed.
Design tokens
--brand-primary, --brand-primary-deep, --ink, --text-on-dark, --duration-fast, --focus-ring. Current website values are generated from src/styles/tokens.css and available at /tokens.json.
Read current website token valuesImplementation notes
Use class="button button-signal" or class="button button-dark" on an anchor with a real href. The CSS primitive is framework independent; this website renders it with Astro. Reduced motion removes the hover translation. Package distribution and cross-platform adapters are in development.