Button
ready
A button component with multiple variants (primary, secondary, tertiary, icon, unstyled) and form integration support.
Example
Loading
Code
HTML
import { NbhdButton } from '@fbin-web/neighborhood-core';<nbhd-button> Button Text </nbhd-button>React
import { NbhdButton } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdButton>Button Text</NbhdButton>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
type
|
type
|
button | submit | reset
|
button
|
The native button type. Use submit when the button should trigger form submission. |
variant
|
variant
|
primary | secondary | tertiary | plain | unstyled | link
|
primary
|
The visual style variant for the button. |
ariaLabel
|
aria-label
|
string
|
|
Accessible label used for screen readers, especially for icon-only buttons. |
cssClass
|
css-class
|
string
|
|
Additional CSS classes to apply to the button. |
iconOnly
|
icon-only
|
boolean
|
false
|
Whether the button is icon-only. This is independent of the variant and should be paired with an aria-label. |
disabled
|
disabled
|
boolean
|
false
|
Disables the button and prevents interactions while the element remains in the DOM. |
Slots
| Name | Description |
|---|---|
| (default) | button'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 button's label. |
suffix
|
Container that wraps the suffix. |
Primary
Styling properties for primary button variant.
| Property | Default Value |
|---|---|
--nbhd-action-primary-backgroundColor
|
var(--nbhd-color-action-primary-background) |
--nbhd-action-primary-backgroundPosition
|
110% 0 |
--nbhd-action-primary-backgroundRepeat
|
no-repeat |
--nbhd-action-primary-backgroundSize
|
205% 100% |
--nbhd-action-primary-borderColor
|
var(--nbhd-color-action-primary-border) |
--nbhd-action-primary-borderRadius
|
var(--nbhd-border-radius-sm) |
--nbhd-action-primary-borderStyle
|
solid |
--nbhd-action-primary-color
|
var(--nbhd-color-action-primary-foreground) |
--nbhd-action-primary-fontFamily
|
var(--nbhd-typography-action-fontFamily) |
--nbhd-action-primary-fontSize
|
var(--nbhd-typography-action-fontSize) |
--nbhd-action-primary-fontStyle
|
normal |
--nbhd-action-primary-fontWeight
|
var(--nbhd-typography-action-fontWeight) |
--nbhd-action-primary-inlineSize
|
auto |
--nbhd-action-primary-letterSpacing
|
2px |
--nbhd-action-primary-lineHeight
|
var(--nbhd-typography-action-lineHeight) |
--nbhd-action-primary-paddingBlock
|
var(--nbhd-base-space-3) |
--nbhd-action-primary-paddingInline
|
var(--nbhd-base-space-9) |
--nbhd-action-primary-textTransform
|
uppercase |
--nbhd-action-primary-gradient-opacity
|
0.25 |
--nbhd-action-primary-hover-backgroundColor
|
var(--nbhd-color-action-primary-hover-background) |
--nbhd-action-primary-hover-backgroundPosition
|
0 0 |
--nbhd-action-primary-hover-borderColor
|
var(--nbhd-color-action-primary-hover-border) |
--nbhd-action-primary-hover-color
|
var(--nbhd-color-action-primary-hover-foreground) |
--nbhd-action-primary-hover-letterSpacing
|
var(--nbhd-action-primary-letterSpacing) |
--nbhd-action-primary-active-backgroundColor
|
var(--nbhd-color-action-primary-active-background) |
--nbhd-action-primary-active-borderColor
|
var(--nbhd-color-action-primary-active-border) |
--nbhd-action-primary-active-color
|
var(--nbhd-color-action-primary-active-foreground) |
--nbhd-action-primary-bpMd-fontSize
|
var(--nbhd-typography-action-bpMd-fontSize) |
--nbhd-action-primary-bpMd-lineHeight
|
var(--nbhd-action-primary-lineHeight) |
Secondary
Styling properties for the secondary button variant.
| Property | Default Value |
|---|---|
--nbhd-action-secondary-backgroundColor
|
var(--nbhd-color-action-secondary-background) |
--nbhd-action-secondary-backgroundPosition
|
110% 0 |
--nbhd-action-secondary-backgroundRepeat
|
no-repeat |
--nbhd-action-secondary-backgroundSize
|
205% 100% |
--nbhd-action-secondary-borderColor
|
var(--nbhd-color-action-secondary-border) |
--nbhd-action-secondary-borderRadius
|
var(--nbhd-border-radius-sm) |
--nbhd-action-secondary-borderStyle
|
solid |
--nbhd-action-secondary-color
|
var(--nbhd-color-action-secondary-foreground) |
--nbhd-action-secondary-fontFamily
|
var(--nbhd-typography-action-fontFamily) |
--nbhd-action-secondary-fontSize
|
var(--nbhd-typography-action-fontSize) |
--nbhd-action-secondary-fontStyle
|
normal |
--nbhd-action-secondary-fontWeight
|
var(--nbhd-typography-action-fontWeight) |
--nbhd-action-secondary-inlineSize
|
auto |
--nbhd-action-secondary-letterSpacing
|
2px |
--nbhd-action-secondary-lineHeight
|
var(--nbhd-typography-action-lineHeight) |
--nbhd-action-secondary-paddingBlock
|
var(--nbhd-base-space-3) |
--nbhd-action-secondary-paddingInline
|
var(--nbhd-base-space-9) |
--nbhd-action-secondary-textTransform
|
uppercase |
--nbhd-action-secondary-gradient-opacity
|
1 |
--nbhd-action-secondary-hover-backgroundColor
|
var(--nbhd-color-action-secondary-hover-background) |
--nbhd-action-secondary-hover-backgroundPosition
|
0 0 |
--nbhd-action-secondary-hover-borderColor
|
var(--nbhd-color-action-secondary-hover-border) |
--nbhd-action-secondary-hover-color
|
var(--nbhd-color-action-secondary-hover-foreground) |
--nbhd-action-secondary-hover-letterSpacing
|
var(--nbhd-action-secondary-letterSpacing) |
--nbhd-action-secondary-active-backgroundColor
|
var(--nbhd-color-action-secondary-active-background) |
--nbhd-action-secondary-active-borderColor
|
var(--nbhd-color-action-secondary-active-border) |
--nbhd-action-secondary-active-color
|
var(--nbhd-color-action-secondary-active-foreground) |
--nbhd-action-secondary-bpMd-fontSize
|
var(--nbhd-typography-action-bpMd-fontSize) |
--nbhd-action-secondary-bpMd-lineHeight
|
var(--nbhd-action-primary-lineHeight) |
Tertiary
Styling properties for the tertiary CTA variant.
| Property | Default Value |
|---|---|
--nbhd-action-tertiary-backgroundColor
|
transparent |
--nbhd-action-tertiary-borderWidth
|
0 |
--nbhd-action-tertiary-color
|
var(--nbhd-color-action-tertiary-foreground) |
--nbhd-action-tertiary-fontFamily
|
var(--nbhd-typography-action-fontFamily) |
--nbhd-action-tertiary-fontSize
|
var(--nbhd-typography-bodySmall-fontSize) |
--nbhd-action-tertiary-letterSpacing
|
normal |
--nbhd-action-tertiary-paddingBlock
|
var(--nbhd-base-space-0) var(--nbhd-base-space-3) |
--nbhd-action-tertiary-paddingInline
|
var(--nbhd-base-space-0) |
--nbhd-action-tertiary-textTransform
|
none |
--nbhd-action-tertiary-transitionDuration
|
0.1s |
--nbhd-action-tertiary-transitionProperty
|
all |
--nbhd-action-tertiary-zIndex
|
var(--nbhd-base-z-1) |
--nbhd-action-tertiary-underline-color
|
var(--nbhd-color-action-tertiary-border) |
--nbhd-action-tertiary-underline-height
|
2px |
--nbhd-action-tertiary-underline-zIndex
|
var(--nbhd-base-z-below) |
--nbhd-action-tertiary-hover-backgroundColor
|
var(--nbhd-color-action-tertiary-hover-background) |
--nbhd-action-tertiary-hover-color
|
var(--nbhd-color-action-tertiary-hover-foreground) |
--nbhd-action-tertiary-hover-underline-color
|
var(--nbhd-color-action-tertiary-hover-border) |
--nbhd-action-tertiary-hover-underline-height
|
5px |
--nbhd-action-tertiary-active-backgroundColor
|
var(--nbhd-color-action-tertiary-active-background) |
--nbhd-action-tertiary-active-color
|
var(--nbhd-color-action-tertiary-active-foreground) |
--nbhd-action-tertiary-active-underline-color
|
var(--nbhd-color-action-tertiary-active-border) |
--nbhd-action-tertiary-active-underline-height
|
5px |
Plain
Styling properties for the plain Button variant.
| Property | Default Value |
|---|---|
--nbhd-action-plain-backgroundColor
|
var(--nbhd-color-action-plain-background) |
--nbhd-action-plain-borderWidth
|
var(--nbhd-border-width-none) |
--nbhd-action-plain-color
|
var(--nbhd-color-action-plain-foreground) |
--nbhd-action-plain-fontFamily
|
var(--nbhd-typography-action-fontFamily) |
--nbhd-action-plain-fontSize
|
var(--nbhd-typography-action-fontSize) |
--nbhd-action-plain-fontWeight
|
var(--nbhd-typography-action-fontWeight) |
--nbhd-action-plain-lineHeight
|
var(--nbhd-typography-action-lineHeight) |
--nbhd-action-plain-letterSpacing
|
normal |
--nbhd-action-plain-paddingBlock
|
var(--nbhd-base-space-0) var(--nbhd-base-space-3) |
--nbhd-action-plain-paddingInline
|
var(--nbhd-base-space-0) |
--nbhd-action-plain-textTransform
|
none |
--nbhd-action-plain-hover-backgroundColor
|
var(--nbhd-color-action-plain-hover-background) |
--nbhd-action-plain-hover-color
|
var(--nbhd-color-action-plain-hover-foreground) |
--nbhd-action-plain-active-backgroundColor
|
var(--nbhd-color-action-plain-active-background) |
--nbhd-action-plain-active-color
|
var(--nbhd-color-action-plain-active-foreground) |
Link
Styling properties for the link Button variant.
| Property | Default Value |
|---|---|
--nbhd-action-link-backgroundColor
|
var(--nbhd-color-action-link-background) |
--nbhd-action-link-borderWidth
|
var(--nbhd-border-width-none) |
--nbhd-action-link-color
|
var(--nbhd-color-action-link-foreground) |
--nbhd-action-link-fontFamily
|
var(--nbhd-typography-action-fontFamily) |
--nbhd-action-link-fontSize
|
var(--nbhd-typography-action-fontSize) |
--nbhd-action-link-fontStyle
|
normal |
--nbhd-action-link-fontWeight
|
var(--nbhd-typography-action-fontWeight) |
--nbhd-action-link-lineHeight
|
var(--nbhd-typography-action-lineHeight) |
--nbhd-action-link-letterSpacing
|
normal |
--nbhd-action-link-paddingBlock
|
var(--nbhd-base-space-0) |
--nbhd-action-link-paddingInline
|
var(--nbhd-base-space-0) |
--nbhd-action-link-textDecoration
|
underline |
--nbhd-action-link-textTransform
|
none |
--nbhd-action-link-hover-backgroundColor
|
var(--nbhd-color-action-link-hover-background) |
--nbhd-action-link-hover-color
|
var(--nbhd-color-action-link-hover-foreground) |
--nbhd-action-link-active-backgroundColor
|
var(--nbhd-color-action-link-active-background) |
--nbhd-action-link-active-color
|
var(--nbhd-color-action-link-active-foreground) |
Unstyled
Styling properties for the unstyled Button variant.
| Property | Default Value |
|---|---|
--nbhd-action-unstyled-backgroundColor
|
transparent |
--nbhd-action-unstyled-borderWidth
|
var(--nbhd-border-width-none) |
--nbhd-action-unstyled-color
|
var(--nbhd-color-text-primary) |
--nbhd-action-unstyled-fontFamily
|
var(--nbhd-typography-action-fontFamily) |
--nbhd-action-unstyled-fontSize
|
var(--nbhd-typography-action-fontSize) |
--nbhd-action-unstyled-fontWeight
|
var(--nbhd-typography-body-fontWeight) |
--nbhd-action-unstyled-lineHeight
|
var(--nbhd-typography-action-lineHeight) |
--nbhd-action-unstyled-paddingBlock
|
var(--nbhd-base-space-0) |
--nbhd-action-unstyled-paddingInline
|
var(--nbhd-base-space-0) |