Link
ready

Basic link component with no additional styling.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdLink } from '@fbin-web/neighborhood-core';
<nbhd-link href="anchor-url-link"> Text Link </nbhd-link>

React 

import { NbhdLink } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdLink href="anchor-url-link">Text Link</NbhdLink>
  </>
);

Properties

Property Attribute Type Default Description
href href string # URL or anchor target for the link.
ariaLabel aria-label string Accessible label used for screen readers when the visible text is not sufficiently descriptive.
cssClass css-class string Additional CSS classes to apply to the rendered anchor element.
external external boolean false Opens the link in a new tab using target="_blank" when true.
active active boolean false Applies the active state styling when the link is the current or selected item.

Events

Name Description Event Detail
nbhd-link-click Emitted when the link is clicked. The native click event is provided on detail.originalEvent. { originalEvent: Event }

Slots

Name Description
(default) Main link label/content rendered inside the anchor element.
prefix Content rendered before the default label, via the prefix slot.
suffix Content rendered after the default label, via the suffix slot.

CSS Parts

CSS parts that can be styled using the ::part() selector:

Name Description
base The rendered <a> anchor element that wraps the link content.
prefix The prefix slot container rendered before the default label slot.
label The default slot container used for the main link label/content.
suffix The suffix slot container rendered after the default label slot.