Link
draft
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
Required
|
href
|
string
|
#
|
Link to another page or section. |
external
|
external
|
boolean
|
false
|
Set target to _blank.
|
ariaLabel
|
aria-label
|
string
|
Descriptive text for additional context. | |
cssClass
|
css-class
|
string
|
Additional CSS classes to apply to link. |
Slots
| Name | Description |
|---|---|
| default | link's label. |
| prefix | Before label. |
| suffix | After label |
CSS Parts
| Name | Description |
|---|---|
| base | The component's base wrapper. |
| prefix | Container that wraps the prefix. |
| label | The link's label. |
| suffix | Container that wraps the suffix. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-link-host-display
|
inline-block |
--nbhd-link-backgroundColor
|
transparent |
--nbhd-link-backgroundImage
|
var(--nbhd-link-backgroundImage-lightTheme) |
--nbhd-link-backgroundPosition
|
|
--nbhd-link-backgroundSize
|
|
--nbhd-link-borderColor
|
var(--nbhd-link-borderColor-lightTheme) |
--nbhd-link-borderRadius
|
|
--nbhd-link-borderStyle
|
|
--nbhd-link-borderWidth
|
0 |
--nbhd-link-color
|
var(--nbhd-link-color-lightTheme) |
--nbhd-link-cursor
|
pointer |
--nbhd-link-display
|
inline |
--nbhd-link-fontFamily
|
inherit |
--nbhd-link-fontSize
|
var(--nbhd-fontSize-regular) |
--nbhd-link-fontStyle
|
normal |
--nbhd-link-fontWeight
|
normal |
--nbhd-link-letterSpacing
|
normal |
--nbhd-link-paddingBlock
|
0 |
--nbhd-link-paddingInline
|
0 |
--nbhd-link-position
|
static |
--nbhd-link-textAlign
|
center |
--nbhd-link-textDecoration
|
underline |
--nbhd-link-textTransform
|
none |
--nbhd-link-transitionDuration
|
|
--nbhd-link-transitionProperty
|
|
--nbhd-link-transitionFunction
|