Inline Link
Note
A component that organizes content into vertically stacked collapsible and expandable sections.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
Anatomy
- Link text: The visible, clickable text or content of the inline link.
- Underline/decoration: Visual indicator (such as underline or color) distinguishing the link from regular text.
- Icon (optional): An optional icon before or after the link text to indicate external links or actions.
States
- Default: Standard appearance, styled as a link.
- Hover: Visual feedback (e.g., underline, color change) when hovered.
- Focus: Focus ring or highlight for keyboard navigation accessibility.
- Visited: Optional styling for links that have been visited.
- Active: Visual feedback when the link is being clicked or activated.
- Disabled: Non-interactive and visually muted (if supported).
Options
- href: The URL or destination for the link.
- target: Specifies where to open the linked document (e.g.,
_blankfor new tab). - rel: Relationship attribute for security (e.g.,
noopener noreferrer). - icon: Optional icon to display with the link.
- underline: Control underline style (always, hover, never).
- color: Custom color for the link text.
- disabled: Disable the link (if supported).
- className: Custom class names for styling.
Behaviors
- Navigation: Clicking the link navigates to the specified
href. - Keyboard accessibility: Link is focusable and can be activated with Enter/Space.
- Hover/Focus feedback: Provides visual feedback on hover and focus for accessibility.
- External indication: Optionally shows an icon or indicator for external links.
- Disabled: Prevents navigation and interaction when disabled.
- Accessibility: Uses semantic
<a>element and ARIA attributes for screen readers.
Changelog
| Date | Type | Description | Author | Associated issue(s) |
|---|---|---|---|---|
| YYYY-MM-DD | new | Initial design | Oanh Nguyen | PAR-52 |