Komponenter
Link
Link er klikkbar tekst eller grafikk som tar brukeren videre til andre sider eller dokumenter.
HTML
Trykk Enter for å redigere
Unable to parse html
const Preview = () => { const rand = useId(); return ( <Link href={'/no/patterns/external-links/' + rand}>Merking av lenker</Link> ); }; render(<Preview />)
Bruk
Komponenten er et <a>-element, og på MDN Web Docs kan du lese mer om anchor HTML-taggen (mozilla.org).
Bruk klassenavnet ds-link på et <a>-element for å bruke stilen til link.
CSS variabler og data-attributter
Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.
| Navn | Verdi |
|---|---|
| --dsc-link-color | var(--ds-color-text-subtle) |
| --dsc-link-color--hover | var(--ds-color-text-default) |
| --dsc-link-color--active | var(--ds-color-text-default) |
| --dsc-link-color--visited | var(--dsc-link-color) |
| --dsc-link-background--active | transparent |
| --dsc-link-text-decoration-thickness--hover | 0.125em |
| --dsc-link-text-decoration-thickness | 0.0625em |
| --dsc-link-border-radius | 0 |
Ingen relevante data-attributter funnet.
React
- children
- Description
The content to display inside the link.
- Type
ReactNode
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content to display inside the link. |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |