Usage
import { Link } from 'nr1'
Examples
Props
Use it to describe better the context of the component's action for users on screen readers.
Content of the link.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
Callback fired any time the user clicks on the link.
function (event: React.MouseEvent )
ARIA attribute use to describe the Link
's role for accessibility,
like role="menuitem"
. By default, Link
's role is "link", so an
explicit role is for use within other accessible elements, such as
role="menu"
elements and others.
Consult
ARIA best practices to
see what role
s can be applied to Link
and in which contexts.
Spacing property. Spacing is defined as a tuple of zero to four
values, which follow the same conventions as CSS properties like
margin
or padding
. To omit a value, use SPACING_TYPE.OMIT
.
<Array of<One ofLink.SPACING_TYPE.EXTRA_LARGE,Link.SPACING_TYPE.LARGE,Link.SPACING_TYPE.MEDIUM,Link.SPACING_TYPE.NONE,Link.SPACING_TYPE.OMIT,Link.SPACING_TYPE.SMALL,>
>
Inline style for custom styling.
Should be used only for positioning and spacing purposes.
Adds a data-test-id
attribute. Use it to target the component in unit and
E2E tests.
For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.
For example, my-nerdpack.some-element
.
Note: You might not see data-test-id
attributes as they are removed
from the DOM, to debug them pass a e2e-test
query parameter to the URL.
Location object or url string to link to.