Link

Overview

• What is this component for? The Link component is a navigable textual utility designed to smoothly redirect users to secondary detail windows or alternate operational views across the Backoffice platform.
• Purpose: It provides a lighter typographic choice relative to standard buttons, allowing quick jumps between relevant dashboard objects without cluttering the structural layout.

Variants & States

State/variant	What changes	When it appears	Figma property
Default	Resting state. Displays standard interactive brand primary color text with no extra decorations.	Always present under static conditions.	state=default color= brand/primary/70 (#4D4DD1)
Hover	Text hue subtly shifts to a deeper or contrasting tone to explicitly signal interaction.	Cursor enters the trigger boundaries.	state=hover color= brand/primary/80 (#3737B3)
Active	Temporary visual pressed color state feedback occurs on click.	On click or tap interaction.	state=active color= brand/primary/60 (#6565E6)
Disabled	Opacity is reduced to a muted gray palette and all standard cursor interaction flags are blocked.	When the targeted path or navigation option is structurally unavailable.	state=disabled color= brand/primary/100 (#202056) opacity = 40%
Icon link	An icon (FontAwesome, 16px) is added to the left of the text, vertically aligned with a fixed 4px gap from the text.	When the link's destination needs visual reinforcement: external links, downloads, or shortcuts to another section or tool.

Accessibility

• Color contrast: Text elements must preserve a 4.5:1 minimum contrast benchmark against the core layout backgrounds.
• Keyboard navigation: Link components must accept direct Tab indexing and navigate natively when the user hits the Enter key.
• Focus state: Must present a highly visible 2px focus ring that meets 3:1 contrast baselines across light and dark system themes.