Link
Links allow users to navigate to different pages or resources. They support various colors, sizes, and can open in new tabs.
Overview
- color
- info · error · warning · success
- size
- h1 · h2 · h3 · h4 · h5 · h6 · subtitle1 · subtitle2 · body1 · body2 · caption
- Toggles
- openInNewTab
All options
Color
Defaults to info.
| size \ color | info | success | warning | error |
|---|---|---|---|---|
| body1 | info link | success link | warning link | error link |
Size
Defaults to body1.
| size \ color | info |
|---|---|
| h1 | h1 link |
| h2 | h2 link |
| h3 | h3 link |
| h4 | h4 link |
| h5 | h5 link |
| h6 | h6 link |
| subtitle1 | subtitle1 link |
| subtitle2 | subtitle2 link |
| body1 | body1 link |
| body2 | body2 link |
| caption | caption link |
Examples
Open in new tab
Links with an http:// or https:// href open in a new tab even without openInNewTab.
External link (opens in new tab)Accessibility
Focus and contrast
Links are always underlined and show a focus ring when reached with Tab. In light mode the text uses the dark shade of each color so it keeps 4.5:1 contrast on light backgrounds. Links that open in a new tab get rel="noopener noreferrer".
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| href | string | Yes | — |
| children | React.ReactNode | Yes | — |
| color | 'info' | 'error' | 'warning' | 'success' | No | — |
| size | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | No | — |
| openInNewTab | boolean | No | — |
| className | string | No | — |