TextLink
Inline navigation. Underlined or not, default or muted, with optional leading/trailing icons.
Usage
Import the component and render it.
import { TextLink } from 'src/components/TextLink/TextLink';
<TextLink underline href="#">Link</TextLink>Accessibility
Role: link (native <a href>).
| Key | Action |
|---|---|
| Enter | Follows the link |
| Tab | Moves focus (shows the Focus Border via :focus-visible) |
- Use a native <a href>; use a Button for actions that do not navigate.
- Disabled links keep the link role with aria-disabled="true", lose their href and leave the Tab order.
- If the link only has an icon, give it an aria-label.
Underline
Set the underline prop: True is {true}, False is {false}.
States
Disabled comes from the disabled prop; Muted from the muted prop. Hover and Focus follow the pointer and the keyboard: try them in the playground.
Used in
TextLink is part of Breadcrumb, EmptyState, Footer and NavigationBar.