NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Link

import Link from '@concur/nui-widgets/lib/Link/Link';

Links are used to navigate to another page, another section within a page or an external website.

Links and buttons are sometimes used interchangeably, but from an accessibility perspective, there are specific use cases for each. Please see Design Usage for Link Button and Link for the distinction between the two and proper usage.

Examples

Sizes

There are 3 supported link sizes: ‘lg’ (default), ‘md’ and ‘sm’. The large size is recommended for all NUI experiences. Use the size property to set the appropriate size.

<Link href='#'>Large</Link>

<Link href='#' size='md'>Medium</Link>

<Link href='#' size='sm'>Small</Link>

Muted

Muted links are an alternate “muted” style of link. Use the muted property to style a muted link.

<Link href='#' muted>Test Link</Link>

Disabled

Although HTML <a> elements do not support the disabled attribute, the disabled property will style the element to look disabled, will remove the href attribute and will set an aria-disabled attribute on the element.

<Link disabled href='#'>Test Link</Link>

Match Button Height

Although semantically different, links and buttons may very well be positioned horizontally relative to each other. Use the matchButtonHeight property to add additional padding so links are the same height as buttons and line up horizontally.

<ButtonToolbar muted>
    <Link href='#' matchButtonHeight>Large Link</Link>
    <Button>Large Button</Button>
</ButtonToolbar>

<ButtonToolbar muted>
    <Link
        href='#'
        matchButtonHeight
        size='md'>
        Medium Link
    </Link>
    <Button size='md'>Medium Button</Button>
</ButtonToolbar>

<ButtonToolbar muted>
    <Link
        href='#'
        matchButtonHeight
        size='sm'>
        Small Link
    </Link>
    <Button size='sm'>Small Button</Button>
</ButtonToolbar>

Usage

Properties

Property Type Default Description
children Node   Renderable content for the link.
className String   Custom classes to be added to the <a> tag.
disabled Boolean false Controls whether the link is enabled or disabled.
href String   The destination URL for the link.
matchButtonHeight Boolean false Provides additional padding so the link match a button’s height of the same size and will line up horizontally.
muted Boolean false Renders the link in an alternate “muted” style.
size String 'lg' Link size. Options are 'lg', 'md', 'sm'.

Callbacks

Property Parameters Description
onClick event Callback function for onClick events.