Button
ReadyA button component with multiple variants (primary, secondary, tertiary, icon, unstyled) and form integration support.
Preview
Code
Install
npm install @fbin-web/neighborhood-core
Import
import { NbhdButton } from '@fbin-web/neighborhood-core';
Usage
<nbhd-button> Button Text </nbhd-button>
Install
npm install @fbin-web/neighborhood-react
Import
import { NbhdButton } from '@fbin-web/neighborhood-react';
Usage
import { NbhdButton } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdButton>Button Text</NbhdButton>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
type | type | buttonsubmitreset | button | The native button type. `submit` submits and `reset` resets the surrounding form; calling `preventDefault()` on the click cancels either, as with a native button. |
variant | variant | primarysecondarytertiaryplainunstyledlink | primary | The visual style variant for the button. |
ariaLabel | aria-label | string | — | Accessible label used for screen readers, especially for icon-only buttons. |
ariaCurrent | aria-current | 'page''step''location''date''time''true''false' | — | Forwarded to the inner button, e.g. the current page in pagination. |
ariaExpanded | aria-expanded | 'true''false' | — | Forwarded to the inner button for disclosure controls. |
ariaHasPopup | aria-haspopup | 'true''false''menu''listbox''tree''grid''dialog' | — | Forwarded to the inner button when it opens a popup. |
ariaPressed | aria-pressed | 'true''false''mixed' | — | Forwarded to the inner button for toggle buttons. |
ariaDisabled | aria-disabled | 'true''false' | — | Forwarded to the inner button. Looks disabled and swallows clicks but stays focusable (unlike disabled). |
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. Icon-only buttons need an `aria-label`; a console warning flags a missing one during development. |
disabled | disabled | boolean | false | Disables the button and prevents interactions while the element remains in the DOM. |
No properties match.
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. |
nbhd-button::part(base) {
/* your styles */
}CSS Properties
Set these on nbhd-button or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.
Action
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-alignItems | — | center |
|
--nbhd-action-appearance | — | none |
|
--nbhd-action-cursor | — | pointer |
|
--nbhd-action-disabled-cursor | — | not-allowed |
|
--nbhd-action-disabled-opacity | --nbhd-opacity-disabled | 0.35 |
|
--nbhd-action-display | — | inline-flex |
|
--nbhd-action-font | — | inherit |
|
--nbhd-action-gradient | — | rgb(from var(--nbhd-action-gradient-color) r g b / var(--nbhd-action-gradient-opacity)) |
|
--nbhd-action-gradient-color | --nbhd-action-primary-gradient-color | — | |
--nbhd-action-gradient-opacity | --nbhd-action-primary-gradient-opacity | 0.25 |
|
--nbhd-action-host-display | — | inline-block |
|
--nbhd-action-justifyContent | — | center |
|
--nbhd-action-margin | --nbhd-space-0 | 0px |
|
--nbhd-action-position | — | relative |
|
--nbhd-action-textDecoration | — | none |
|
--nbhd-action-transitionDuration | --nbhd-motion-duration-normal | 0.2s |
|
--nbhd-action-transitionFunction | --nbhd-motion-easing-inOut | ease-in-out |
|
--nbhd-action-transitionProperty | — | background-color, background-position, color, text-decoration |
|
--nbhd-action-userSelect | — | none |
|
--nbhd-action-whiteSpace | — | nowrap |
|
--nbhd-action-zIndex | --nbhd-z-auto | auto |
No action match.
Action primary
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-primary-active-backgroundColor | --nbhd-color-action-primary-active-background | #1b5e20 |
|
--nbhd-action-primary-active-borderColor | --nbhd-color-action-primary-active-border | #1b5e20 |
|
--nbhd-action-primary-active-color | --nbhd-color-action-primary-active-foreground | #ffffff |
|
--nbhd-action-primary-backgroundColor | --nbhd-color-action-primary-background | #1b5e20 |
|
--nbhd-action-primary-backgroundImage | — | linear-gradient(to left, transparent, transparent 50%, var(--nbhd-action-gradient) 50%) |
|
--nbhd-action-primary-backgroundPosition | — | 110% 0 |
|
--nbhd-action-primary-backgroundRepeat | — | no-repeat |
|
--nbhd-action-primary-backgroundSize | — | 205% 100% |
|
--nbhd-action-primary-borderColor | --nbhd-color-action-primary-border | #1b5e20 |
|
--nbhd-action-primary-borderRadius | --nbhd-border-radius-sm | 2px |
|
--nbhd-action-primary-borderStyle | — | solid |
|
--nbhd-action-primary-bpMd-fontSize | --nbhd-typography-action-bpMd-fontSize | 0.6875rem |
|
--nbhd-action-primary-bpMd-lineHeight | --nbhd-action-primary-lineHeight | 1 |
|
--nbhd-action-primary-color | --nbhd-color-action-primary-foreground | #ffffff |
|
--nbhd-action-primary-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-primary-fontSize | --nbhd-typography-action-fontSize | 0.6875rem |
|
--nbhd-action-primary-fontStyle | — | normal |
|
--nbhd-action-primary-fontWeight | --nbhd-typography-action-fontWeight | 700 |
|
--nbhd-action-primary-gradient-color | --nbhd-context-color-action-primary-interactive | Adapts to surface | |
--nbhd-action-primary-gradient-opacity | — | 0.25 |
|
--nbhd-action-primary-hover-backgroundColor | --nbhd-color-action-primary-hover-background | #1b5e20 |
|
--nbhd-action-primary-hover-backgroundPosition | — | 0 0 |
|
--nbhd-action-primary-hover-borderColor | --nbhd-color-action-primary-hover-border | #1b5e20 |
|
--nbhd-action-primary-hover-color | --nbhd-color-action-primary-hover-foreground | #ffffff |
|
--nbhd-action-primary-hover-letterSpacing | --nbhd-action-primary-letterSpacing | 2px |
|
--nbhd-action-primary-inlineSize | — | auto |
|
--nbhd-action-primary-letterSpacing | --nbhd-typography-action-letterSpacing | 2px |
|
--nbhd-action-primary-lineHeight | --nbhd-typography-action-lineHeight | 1 |
|
--nbhd-action-primary-paddingBlock | --nbhd-space-3 | 12px |
|
--nbhd-action-primary-paddingInline | --nbhd-space-9 | 36px |
|
--nbhd-action-primary-textTransform | — | uppercase |
No action primary match.
Action secondary
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-secondary-active-backgroundColor | --nbhd-color-action-secondary-active-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-secondary-active-borderColor | --nbhd-color-action-secondary-active-border | #1b5e20 |
|
--nbhd-action-secondary-active-color | --nbhd-color-action-secondary-active-foreground | #ffffff |
|
--nbhd-action-secondary-backgroundColor | --nbhd-color-action-secondary-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-secondary-backgroundImage | — | linear-gradient(to left, transparent, transparent 50%, var(--nbhd-action-gradient) 50%) |
|
--nbhd-action-secondary-backgroundPosition | — | 110% 0 |
|
--nbhd-action-secondary-backgroundRepeat | — | no-repeat |
|
--nbhd-action-secondary-backgroundSize | — | 205% 100% |
|
--nbhd-action-secondary-borderColor | --nbhd-color-action-secondary-border | #1b5e20 |
|
--nbhd-action-secondary-borderRadius | --nbhd-border-radius-sm | 2px |
|
--nbhd-action-secondary-borderStyle | — | solid |
|
--nbhd-action-secondary-bpMd-fontSize | --nbhd-typography-action-bpMd-fontSize | 0.6875rem |
|
--nbhd-action-secondary-bpMd-lineHeight | --nbhd-action-primary-lineHeight | 1 |
|
--nbhd-action-secondary-color | --nbhd-color-action-secondary-foreground | #1b5e20 |
|
--nbhd-action-secondary-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-secondary-fontSize | --nbhd-typography-action-fontSize | 0.6875rem |
|
--nbhd-action-secondary-fontStyle | — | normal |
|
--nbhd-action-secondary-fontWeight | --nbhd-typography-action-fontWeight | 700 |
|
--nbhd-action-secondary-gradient-opacity | — | 1 |
|
--nbhd-action-secondary-hover-backgroundColor | --nbhd-color-action-secondary-hover-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-secondary-hover-backgroundPosition | — | 0 0 |
|
--nbhd-action-secondary-hover-borderColor | --nbhd-color-action-secondary-hover-border | #1b5e20 |
|
--nbhd-action-secondary-hover-color | --nbhd-color-action-secondary-hover-foreground | #ffffff |
|
--nbhd-action-secondary-hover-letterSpacing | --nbhd-action-secondary-letterSpacing | 2px |
|
--nbhd-action-secondary-inlineSize | — | auto |
|
--nbhd-action-secondary-letterSpacing | --nbhd-typography-action-letterSpacing | 2px |
|
--nbhd-action-secondary-lineHeight | --nbhd-typography-action-lineHeight | 1 |
|
--nbhd-action-secondary-paddingBlock | --nbhd-space-3 | 12px |
|
--nbhd-action-secondary-paddingInline | --nbhd-space-9 | 36px |
|
--nbhd-action-secondary-textTransform | — | uppercase |
No action secondary match.
Action tertiary
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-tertiary-active-backgroundColor | --nbhd-color-action-tertiary-active-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-tertiary-active-color | --nbhd-color-action-tertiary-active-foreground | #1b5e20 |
|
--nbhd-action-tertiary-active-underline-color | --nbhd-color-action-tertiary-active-border | #1b5e20 |
|
--nbhd-action-tertiary-active-underline-height | — | 5px |
|
--nbhd-action-tertiary-backgroundColor | — | transparent |
|
--nbhd-action-tertiary-borderWidth | --nbhd-border-width-none | 0 |
|
--nbhd-action-tertiary-color | --nbhd-color-action-tertiary-foreground | #1b5e20 |
|
--nbhd-action-tertiary-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-tertiary-fontSize | --nbhd-typography-bodySmall-fontSize | 0.875rem |
|
--nbhd-action-tertiary-hover-backgroundColor | --nbhd-color-action-tertiary-hover-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-tertiary-hover-color | --nbhd-color-action-tertiary-hover-foreground | #1b5e20 |
|
--nbhd-action-tertiary-hover-underline-color | --nbhd-color-action-tertiary-hover-border | #1b5e20 |
|
--nbhd-action-tertiary-hover-underline-height | — | 5px |
|
--nbhd-action-tertiary-letterSpacing | — | normal |
|
--nbhd-action-tertiary-paddingBlock | --nbhd-space-0 --nbhd-space-3 | 0px 12px |
|
--nbhd-action-tertiary-paddingInline | --nbhd-space-0 | 0px |
|
--nbhd-action-tertiary-transitionDuration | — | 0.1s |
|
--nbhd-action-tertiary-transitionFunction | — | Override only | |
--nbhd-action-tertiary-transitionProperty | — | all |
|
--nbhd-action-tertiary-underline-color | --nbhd-color-action-tertiary-border | #1b5e20 |
|
--nbhd-action-tertiary-underline-height | --nbhd-border-width-emphasis | 2px |
|
--nbhd-action-tertiary-underline-zIndex | --nbhd-z-below | -1 |
|
--nbhd-action-tertiary-zIndex | --nbhd-z-1 | 1 |
No action tertiary match.
Action plain
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-plain-active-backgroundColor | --nbhd-color-action-plain-active-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-plain-active-borderColor | — | Override only | |
--nbhd-action-plain-active-color | --nbhd-color-action-plain-active-foreground | #1b5e20 |
|
--nbhd-action-plain-backgroundColor | --nbhd-color-action-plain-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-plain-borderWidth | --nbhd-border-width-none | 0 |
|
--nbhd-action-plain-color | --nbhd-color-action-plain-foreground | #1b5e20 |
|
--nbhd-action-plain-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-plain-fontSize | --nbhd-typography-action-fontSize | 0.6875rem |
|
--nbhd-action-plain-fontStyle | — | Override only | |
--nbhd-action-plain-fontWeight | --nbhd-typography-action-fontWeight | 700 |
|
--nbhd-action-plain-hover-backgroundColor | --nbhd-color-action-plain-hover-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-plain-hover-borderColor | — | Override only | |
--nbhd-action-plain-hover-color | --nbhd-color-action-plain-hover-foreground | #1b5e20 |
|
--nbhd-action-plain-letterSpacing | — | normal |
|
--nbhd-action-plain-lineHeight | --nbhd-typography-action-lineHeight | 1 |
|
--nbhd-action-plain-paddingBlock | --nbhd-space-0 --nbhd-space-3 | 0px 12px |
|
--nbhd-action-plain-paddingInline | --nbhd-space-0 | 0px |
|
--nbhd-action-plain-textTransform | — | none |
No action plain match.
Action unstyled
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-unstyled-backgroundColor | — | transparent |
|
--nbhd-action-unstyled-borderWidth | --nbhd-border-width-none | 0 |
|
--nbhd-action-unstyled-color | --nbhd-color-text-primary | #1c1d1f |
|
--nbhd-action-unstyled-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-unstyled-fontSize | --nbhd-typography-action-fontSize | 0.6875rem |
|
--nbhd-action-unstyled-lineHeight | --nbhd-typography-action-lineHeight | 1 |
|
--nbhd-action-unstyled-paddingBlock | --nbhd-space-0 | 0px |
|
--nbhd-action-unstyled-paddingInline | --nbhd-space-0 | 0px |
No action unstyled match.
Action link
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-link-active-backgroundColor | --nbhd-color-action-link-active-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-link-active-borderColor | — | Override only | |
--nbhd-action-link-active-color | --nbhd-color-action-link-active-foreground | #1b5e20 |
|
--nbhd-action-link-backgroundColor | --nbhd-color-action-link-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-link-borderWidth | --nbhd-border-width-none | 0 |
|
--nbhd-action-link-color | --nbhd-color-action-link-foreground | #1b5e20 |
|
--nbhd-action-link-fontFamily | --nbhd-typography-action-fontFamily | sans-serif |
|
--nbhd-action-link-fontSize | --nbhd-typography-action-fontSize | 0.6875rem |
|
--nbhd-action-link-fontStyle | — | normal |
|
--nbhd-action-link-fontWeight | --nbhd-typography-action-fontWeight | 700 |
|
--nbhd-action-link-hover-backgroundColor | --nbhd-color-action-link-hover-background | rgba(0, 0, 0, 0) |
|
--nbhd-action-link-hover-borderColor | — | Override only | |
--nbhd-action-link-hover-color | --nbhd-color-action-link-hover-foreground | #1b5e20 |
|
--nbhd-action-link-letterSpacing | — | normal |
|
--nbhd-action-link-lineHeight | --nbhd-typography-action-lineHeight | 1 |
|
--nbhd-action-link-paddingBlock | --nbhd-space-0 | 0px |
|
--nbhd-action-link-paddingInline | --nbhd-space-0 | 0px |
|
--nbhd-action-link-textDecoration | — | underline |
|
--nbhd-action-link-textTransform | — | none |
No action link match.
Action icon only
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-action-iconOnly-blockSize | --nbhd-size-control-md | 32px |
|
--nbhd-action-iconOnly-borderRadius | --nbhd-border-radius-full | 9999px |
|
--nbhd-action-iconOnly-inlineSize | --nbhd-size-control-md | 32px |
|
--nbhd-action-iconOnly-paddingBlock | --nbhd-space-0 | 0px |
|
--nbhd-action-iconOnly-paddingInline | --nbhd-space-0 | 0px |