Badge
draft
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>
</>
);Slots
| Name | Description |
|---|---|
| default | badge's content. |
| prefix | Before content. |
| suffix | After content |
CSS Parts
| Name | Description |
|---|---|
| base | The component's base wrapper. |
| prefix | Container that wraps the prefix. |
| content | The badge's content. |
| suffix | Container that wraps the suffix. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-badge-backgroundColor
|
rgba(var(--nbhd-color-white-rgb), 0.74), var(--nbhd-color-white) |
--nbhd-badge-color
|
var(--nbhd-color-black) |
--nbhd-badge-display
|
inline-block |
--nbhd-badge-fontFamily
|
inherit |
--nbhd-badge-fontSize
|
var(--nbhd-fontSize-tiny) |
--nbhd-badge-fontStyle
|
normal |
--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-space-1) |
--nbhd-badge-paddingInline
|
var(--nbhd-space-3) |
--nbhd-badge-position
|
static |
--nbhd-badge-textAlign
|
center |
--nbhd-badge-textOverflow
|
ellipsis |
--nbhd-badge-textTransform
|
uppercase |