Badge
ReadyA small label for short status or highlight text, with optional prefix and suffix content.
Preview
Code
Install
npm install @fbin-web/neighborhood-core
Import
import { NbhdBadge } from '@fbin-web/neighborhood-core';
Usage
<nbhd-badge> New </nbhd-badge>
Install
npm install @fbin-web/neighborhood-react
Import
import { NbhdBadge } from '@fbin-web/neighborhood-react';
Usage
import { NbhdBadge } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdBadge>New</NbhdBadge>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
cssClass | css-class | string | — | Additional CSS classes to apply to the badge. |
Slots
| Name | Description |
|---|---|
(default) | Badge content. |
prefix | Content rendered before the badge content. |
suffix | Content rendered after the badge content. |
CSS Parts
| Name | Description |
|---|---|
base | The root wrapper for the badge. |
prefix | The slot container for the prefix content. |
content | The slot container for the default badge content. |
suffix | The slot container for the suffix content. |
nbhd-badge::part(base) {
/* your styles */
}CSS Properties
Set these on nbhd-badge 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.
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-badge-backgroundColor | --nbhd-color-surface-highlight | #e3f2fd |
|
--nbhd-badge-borderColor | — | rgba(0, 0, 0, 0) |
|
--nbhd-badge-borderRadius | --nbhd-border-radius-none | 0 |
|
--nbhd-badge-borderStyle | — | solid |
|
--nbhd-badge-borderWidth | --nbhd-border-width-subtle | 1px |
|
--nbhd-badge-color | --nbhd-color-text-primary | #1c1d1f |
|
--nbhd-badge-display | — | inline-block |
|
--nbhd-badge-fontFamily | --nbhd-typography-badge-fontFamily | sans-serif |
|
--nbhd-badge-fontSize | --nbhd-typography-badge-fontSize | 0.625rem |
|
--nbhd-badge-fontStyle | — | inherit |
|
--nbhd-badge-fontWeight | --nbhd-typography-badge-fontWeight | 700 |
|
--nbhd-badge-host-display | — | inline-block |
|
--nbhd-badge-insetBlockEnd | — | auto |
|
--nbhd-badge-insetBlockStart | — | auto |
|
--nbhd-badge-insetInlineEnd | — | auto |
|
--nbhd-badge-insetInlineStart | — | auto |
|
--nbhd-badge-letterSpacing | — | normal |
|
--nbhd-badge-lineHeight | --nbhd-typography-badge-lineHeight | 1 |
|
--nbhd-badge-maxInlineSize | — | 100% |
|
--nbhd-badge-overflow | — | hidden |
|
--nbhd-badge-paddingBlock | --nbhd-space-1 | 4px |
|
--nbhd-badge-paddingInline | --nbhd-space-1 | 4px |
|
--nbhd-badge-position | — | static |
|
--nbhd-badge-textAlign | — | center |
|
--nbhd-badge-textOverflow | — | ellipsis |
|
--nbhd-badge-textTransform | — | uppercase |
|
--nbhd-badge-textWrap | — | nowrap |
No badge match.