Link
ReadyBasic link component with no additional styling.
Preview
Code
Install
npm install @fbin-web/neighborhood-core
Import
import { NbhdLink } from '@fbin-web/neighborhood-core';
Usage
<nbhd-link href="anchor-url-link"> Text Link </nbhd-link>
Install
npm install @fbin-web/neighborhood-react
Import
import { NbhdLink } from '@fbin-web/neighborhood-react';
Usage
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. |
ariaCurrent | aria-current | 'page''step''location''date''time''true''false' | — | Forwarded to the inner link, e.g. `page` for the current page. |
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. |
externalLabel | external-label | string | (opens in a new tab) | Added to the accessible name (visually hidden) when `external` opens the link in a new tab, so it isn’t a surprise. External links also get `rel="noopener noreferrer"`. |
active | active | boolean | false | Marks the link as the current page: styled as active and announced with aria-current="page" (unless aria-current is set). |
No properties match.
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. |
nbhd-link::part(base) {
/* your styles */
}CSS Properties
Set these on nbhd-link or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-link-blockSize | — | auto |
|
--nbhd-link-color | --nbhd-context-color-link-foreground | Adapts to surface | |
--nbhd-link-cursor | — | pointer |
|
--nbhd-link-display | — | inline |
|
--nbhd-link-fontFamily | --nbhd-typography-body-fontFamily | sans-serif |
|
--nbhd-link-fontSize | --nbhd-typography-body-fontSize | 1rem |
|
--nbhd-link-fontStyle | — | inherit |
|
--nbhd-link-fontWeight | --nbhd-typography-body-fontWeight | 400 |
|
--nbhd-link-host-display | — | inline-block |
|
--nbhd-link-inlineSize | — | auto |
|
--nbhd-link-letterSpacing | — | inherit |
|
--nbhd-link-marginBlock | --nbhd-space-0 | 0px |
|
--nbhd-link-marginInline | --nbhd-space-0 | 0px |
|
--nbhd-link-paddingBlock | --nbhd-space-0 | 0px |
|
--nbhd-link-paddingInline | --nbhd-space-0 | 0px |
|
--nbhd-link-position | — | static |
|
--nbhd-link-textAlign | — | start |
|
--nbhd-link-textDecoration | — | underline |
|
--nbhd-link-textDecorationColor | --nbhd-context-color-link-decoration | Adapts to surface | |
--nbhd-link-textTransform | — | inherit |
|
--nbhd-link-transitionDuration | — | 0s |
|
--nbhd-link-transitionFunction | --nbhd-motion-easing-standard | ease |
|
--nbhd-link-transitionProperty | — | all |
|
--nbhd-link-zIndex | --nbhd-z-auto | auto |
No link match.