Backlink

GitHub Figma

Om komponenten

Backlink lar brukeren navigere tilbake til forrige sted i en løsning eller et nettsted.

Egnet til:

Produkter eller sider med kun to nivåer
Bruk på mindre flater, som på mobil

Uegnet til:

Produkter eller sider med flere nivåer i navigeringen.
Ved flere nivåer i navigasjonshierarkiet bør du bruke Breadcrumbs

Relaterte komponenter

Breadcrumbs

Varianter

<>
  <Backlink href="#back">
    Tilbake
  </Backlink>
  
  <Backlink>
    Tilbake
  </Backlink>
</>

Retningslinjer

Plassering

Backlink plasseres øverst til venstre på siden, under overskriften og navigasjonen, men over sidetittelen. Den skal benytte samme posisjon som Breadcrumbs.

Innhold

Du kan selv velge om backlinken skal innholde navnet på den forrige siden, eller at det står "Tilbake".

Formatering

Anatomi

Backlink-komponentens anaotmi med sidekobling, ikon og landingsside.

Sidekobling:
Enten ha "tilbake" eller forrige sides navn
Ikon:
Skal alltid være en pil til venstre for å indikere tilbake til forrige side

Universell utforming

Husk på

Backlinken må alltid være tilgjengelig med skjermleser og tastaturnavigering
Lenketeksten skal være tydelig og formidler målet for lenken

Sjekkliste

✓ Vi har testet at lenketeksten tydelig formidler målet for lenken.

✓ Vi har testet at backlink er tilgjengelig med skjermleser og tastaturnavigering.

Les mer

uu tilsynet lenker

Interaksjon

Tastatur

Key	Interaksjon
Tab	Kunne fokusere komponenten
Enter	Kunne trykke på lenken

Props

Backlink

Prop	Description	Default
`form?`	The `<form>` element to associate the button with. The value of this attribute must be the id of a `<form>` in the same document.	-
`formAction?`	The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.	-
`formEncType?`	Indicates how to encode the form data that is submitted.	-
`formMethod?`	Indicates the HTTP method used to submit the form.	-
`formNoValidate?`	Indicates that the form is not to be validated when it is submitted.	-
`formTarget?`	Overrides the target attribute of the button's form owner.	-
`name?`	Submitted as a pair with the button's value as part of the form data.	-
`value?`	The value associated with the button's name when it's submitted with the form data.	-
`isPending?`	Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers.	-
`isDisabled?`	Whether the button is disabled. Whether the link is disabled.	-
`onPress?`	Handler that is called when the press is released over the target.	-
`onPressStart?`	Handler that is called when a press interaction starts.	-
`onPressEnd?`	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.	-
`onPressChange?`	Handler that is called when the press state changes.	-
`onPressUp?`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.	-
`autoFocus?`	Whether the element should receive focus on render.	-
`onFocus?`	Handler that is called when the element receives focus.	-
`onBlur?`	Handler that is called when the element loses focus.	-
`onFocusChange?`	Handler that is called when the element's focus status changes.	-
`onKeyDown?`	Handler that is called when a key is pressed.	-
`onKeyUp?`	Handler that is called when a key is released.	-
`aria-expanded?`	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.	-
`aria-haspopup?`	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.	-
`aria-controls?`	Identifies the element (or elements) whose contents or presence are controlled by the current element.	-
`aria-pressed?`	Indicates the current "pressed" state of toggle buttons.	-
`aria-current?`	Indicates whether this element represents the current item within a container or set of related elements.	-
`type?`	The behavior of the button when used in an HTML form.	'button'
`preventFocusOnPress?`	Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.	-
`excludeFromTabOrder?`	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.	-
`id?`	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).	-
`aria-label?`	Defines a string value that labels the current element.	-
`aria-labelledby?`	Identifies the element (or elements) that labels the current element.	-
`aria-describedby?`	Identifies the element (or elements) that describes the object.	-
`aria-details?`	Identifies the element (or elements) that provide a detailed, extended description for the object.	-
`onHoverStart?`	Handler that is called when a hover interaction starts.	-
`onHoverEnd?`	Handler that is called when a hover interaction ends.	-
`onHoverChange?`	Handler that is called when the hover state changes.	-
`slot?`	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.	-
`children?`	The children of the component. A function may be provided to alter the children based on component state.	-
`className?`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. Additional CSS className for the element.	-
`style?`	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.	-
`href?`	Determines whether to use an anchor or a button for the Backlink A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).	-
`withUnderline?`	To add a permanent underline on the link (not only on hover)	false
`ref?`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}	-
`key?`		-
`target?`	The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).	-
`rel?`	The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).	-
`hrefLang?`	Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).	-
`download?`	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).	-
`ping?`	A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).	-
`referrerPolicy?`	How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).	-
`routerOptions?`	Options for the configured client side router.	-