Button
ready
A button component with multiple variants (primary, secondary, tertiary, icon, unstyled) and form integration support.
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 type of button. |
variant
|
variant
|
default | primary | secondary | tertiary | icon | unstyled
|
default
|
The style variant of button. |
ariaLabel
|
aria-label
|
string
|
Descriptive text for additional context. | |
cssClass
|
css-class
|
string
|
Additional CSS classes to apply to button. | |
disabled
|
disabled
|
boolean
|
false
|
If enabled the button will be disabled and prevent interactions. |
dark
|
dark
|
boolean
|
false
|
Enables dark theme styling for the button. |
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. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-action-backgroundColor
|
var(--nbhd-color-white) |
--nbhd-action-backgroundColor-hover
|
var(--nbhd-action-backgroundColor) |
--nbhd-action-backgroundImage
|
linear-gradient(...) |
--nbhd-action-backgroundPosition
|
110% 0 |
--nbhd-action-backgroundRepeat
|
no-repeat |
--nbhd-action-backgroundSize
|
205% 100% |
--nbhd-action-borderColor
|
var(--nbhd-color-gray) |
--nbhd-action-borderRadius
|
var(--nbhd-borderRadius-sm, 2px) |
--nbhd-action-borderStyle
|
solid |
--nbhd-action-borderWidth
|
2px |
--nbhd-action-color
|
var(--nbhd-color-black) |
--nbhd-action-color-hover
|
var(--nbhd-action-color, currentColor) |
--nbhd-action-cursor
|
pointer |
--nbhd-action-display
|
inline-block |
--nbhd-action-fontFamily
|
var(--nbhd-fontFamily, inherit) |
--nbhd-action-fontSize
|
var(--nbhd-fontSize-xxs, 11px) |
--nbhd-action-fontSize-bpMd
|
var(--nbhd-action-fontSize) |
--nbhd-action-fontStyle
|
normal |
--nbhd-action-fontWeight
|
var(--nbhd-fontWeight-700, 700) |
--nbhd-action-inlineSize
|
auto |
--nbhd-action-inlineSize-bpMd
|
var(--nbhd-action-inlineSize) |
--nbhd-action-letterSpacing
|
var(--nbhd-letterSpacing-2, 2px) |
--nbhd-action-letterSpacing-hover
|
var(--nbhd-action-letterSpacing) |
--nbhd-action-lineHeight
|
normal |
--nbhd-action-lineHeight-bpMd
|
var(--nbhd-action-lineHeight) |
--nbhd-action-opacity
|
1 |
--nbhd-action-paddingBlock
|
var(--nbhd-space-3, 12px) |
--nbhd-action-paddingInline
|
var(--nbhd-space-9, 36px) |
--nbhd-action-position
|
relative |
--nbhd-action-textAlign
|
center |
--nbhd-action-textDecoration
|
none |
--nbhd-action-textTransform
|
uppercase |
--nbhd-action-transitionDuration
|
0.2s |
--nbhd-action-transitionProperty
|
background-color, background-position, color, text-decoration |
--nbhd-action-transitionFunction
|
ease-in-out |
--nbhd-action-zIndex
|
auto |
--nbhd-action-host-display
|
inline-block |
--nbhd-action-host-display-bpMd
|
var(--nbhd-action-host-display) |