Badge
ready
Example
Loading
Code
HTML
import { NbhdBadge } from '@fbin-web/neighborhood-core';<nbhd-badge> New </nbhd-badge>React
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. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-badge-host-display
|
inline-block |
--nbhd-badge-backgroundColor
|
rgba(var(--nbhd-color-white-rgb), 0.74), var(--nbhd-base-color-white) |
--nbhd-badge-borderColor
|
transparent |
--nbhd-badge-borderRadius
|
0 |
--nbhd-badge-borderStyle
|
solid |
--nbhd-badge-borderWidth
|
1px |
--nbhd-badge-color
|
var(--nbhd-base-color-black) |
--nbhd-badge-display
|
inline-block |
--nbhd-badge-fontFamily
|
inherit |
--nbhd-badge-fontSize
|
var(--nbhd-fontSize-tiny) |
--nbhd-badge-fontStyle
|
inherit |
--nbhd-badge-fontWeight
|
var(--nbhd-fontWeight-700) |
--nbhd-badge-insetBlockEnd
|
auto |
--nbhd-badge-insetBlockStart
|
auto |
--nbhd-badge-insetInlineEnd
|
auto |
--nbhd-badge-insetInlineStart
|
auto |
--nbhd-badge-letterSpacing
|
normal |
--nbhd-badge-lineHeight
|
normal |
--nbhd-badge-maxInlineSize
|
124px |
--nbhd-badge-overflow
|
hidden |
--nbhd-badge-paddingBlock
|
var(--nbhd-base-space-1) |
--nbhd-badge-paddingInline
|
var(--nbhd-base-space-3) |
--nbhd-badge-position
|
static |
--nbhd-badge-textAlign
|
center |
--nbhd-badge-textOverflow
|
ellipsis |
--nbhd-badge-textTransform
|
uppercase |
--nbhd-badge-textWrap
|
nowrap |