Link
ready
Basic link component with no additional styling.
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
|
#
|
Link to another page or section. |
ariaLabel
|
aria-label
|
string
|
Descriptive text for additional context. | |
cssClass
|
css-class
|
string
|
Additional CSS classes to apply to link. | |
external
|
external
|
boolean
|
false
|
Set target to _blank and reflect to attribute.
|
active
|
active
|
boolean
|
false
|
Indicates if the link is active/current and reflects to attribute. |
theme
|
theme
|
light | dark
|
light
|
Theme variant for the link appearance. |
dark
|
dark
|
boolean
|
false
|
Enable dark theme styling. |
Events
| Name | Description | Event Detail |
|---|---|---|
nbhd-link-click
|
Emitted when the link is clicked. | { originalEvent: Event } |
Slots
| Name | Description |
|---|---|
| (default) | link's label. |
prefix
|
Before label. |
suffix
|
After label |
CSS Parts
CSS parts that can be styled using the ::part() selector:
| Name | Description |
|---|---|
base
|
The main <a> anchor element.
|
prefix
|
The prefix slot container that appears before the label. |
label
|
The default slot container for the link's text content. |
suffix
|
The suffix slot container that appears after the label. |
CSS Properties
CSS custom properties that can be used to customize the link appearance and behavior:
| Property | Default Value |
|---|---|
--nbhd-link-host-display
|
inline-block |
--nbhd-link-backgroundColor
|
transparent |
--nbhd-link-backgroundImage
|
none |
--nbhd-link-backgroundPosition
|
center |
--nbhd-link-backgroundSize
|
cover |
--nbhd-link-blockSize
|
auto |
--nbhd-link-borderColor
|
transparent |
--nbhd-link-borderRadius
|
0 |
--nbhd-link-borderStyle
|
solid |
--nbhd-link-borderWidth
|
0 |
--nbhd-link-color
|
var(--nbhd-color-text-primary) |
--nbhd-link-cursor
|
pointer |
--nbhd-link-display
|
inline |
--nbhd-link-flexDirection
|
row |
--nbhd-link-fontFamily
|
var(--nbhd-fontFamily, inherit) |
--nbhd-link-fontSize
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-link-fontStyle
|
normal |
--nbhd-link-fontWeight
|
normal |
--nbhd-link-inlineSize
|
auto |
--nbhd-link-letterSpacing
|
normal |
--nbhd-link-marginBlock
|
0 |
--nbhd-link-marginInline
|
auto |
--nbhd-link-paddingBlock
|
0 |
--nbhd-link-paddingInline
|
0 |
--nbhd-link-position
|
static |
--nbhd-link-textAlign
|
left |
--nbhd-link-textDecoration
|
underline |
--nbhd-link-textTransform
|
inherit |
--nbhd-link-transitionDuration
|
200ms |
--nbhd-link-transitionProperty
|
all |
--nbhd-link-transitionTimingFunction
|
ease |
--nbhd-link-zIndex
|
auto |
--nbhd-link-hover-color
|
var(--nbhd-color-text-secondary) |
--nbhd-link-hover-textDecoration
|
none |
--nbhd-link-active-color
|
var(--nbhd-color-primary) |
--nbhd-link-focus-outlineColor
|
var(--nbhd-color-primary) |
--nbhd-link-focus-outlineWidth
|
2px |
--nbhd-link-focus-outlineOffset
|
2px |