Button
draft
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 | underlined
|
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. |
theme
|
theme
|
light | dark
|
light
|
The theme styling of 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-button-backgroundColor
|
transparent |
--nbhd-button-backgroundImage
|
none |
--nbhd-button-backgroundPosition
|
0 0 |
--nbhd-button-backgroundSize
|
100% |
--nbhd-button-borderColor
|
transparent |
--nbhd-button-borderRadius
|
2px |
--nbhd-button-borderStyle
|
solid |
--nbhd-button-borderWidth
|
2px |
--nbhd-button-color-lightTheme
|
var(--nbhd-fbin-color-fbinNavy) |
--nbhd-button-color-darkTheme
|
var(--nbhd-color-white) |
--nbhd-button-color-hover-lightTheme
|
var(--nbhd-fbin-color-fbinNavy) |
--nbhd-button-color-hover-darkTheme
|
var(--nbhd-color-white) |
--nbhd-button-cursor
|
pointer |
--nbhd-button-display
|
inline-block |
--nbhd-button-fontFamily
|
var(--nbhd-link-fontStack) |
--nbhd-button-fontSize
|
var(--nbhd-fontSize-xxs) |
--nbhd-button-fontStyle
|
normal |
--nbhd-button-fontWeight
|
var(--nbhd-fontWeight-700) |
--nbhd-button-letterSpacing
|
var(--nbhd-letterSpacing-2) |
--nbhd-button-paddingBlock
|
var(--nbhd-space-3) |
--nbhd-button-paddingInline
|
var(--nbhd-space-9) |
--nbhd-button-position
|
relative |
--nbhd-button-textAlign
|
center |
--nbhd-button-textDecoration
|
none |
--nbhd-button-textDecorationThickness
|
auto |
--nbhd-button-textDecorationThickness-hover
|
auto |
--nbhd-button-textDecorationColor
|
inherit |
--nbhd-button-textTransform
|
uppercase |
--nbhd-button-textUnderlineOffset
|
auto |
--nbhd-button-transitionFunction
|
ease-in-out |
--nbhd-button-transitionDuration
|
0.2s |
--nbhd-button-transitionProperty
|
background-color, color, text-decoration |