Badge

Compact status labels and contextual indicators.

Interactive playground

LIVE PREVIEW

In review

Generated code

import { Badge } from '@vrum/ui';

<Badge
  variant={"default"}
  size={"sm"}
  dot={false}
  badgeStyle={"default"}
  numeric={false}
>
  {"In review"}
</Badge>

Badge props

Prop	Type	Default	Description
`variant`	`BadgeVariant`	`"default"`	Status appearance.
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Badge size.
`dot`	`boolean`	`false`	Show a status dot.
`badgeStyle`	`"outline" \| "default" \| "reversed"`	`"default"`	Surface treatment.
`numeric`	`boolean`	`false`	Use tabular digits.
`iconLeft`	`React.ReactNode`	none	icon left configuration.
`iconRight`	`React.ReactNode`	none	icon right configuration.
`onDelete`	`(() => void)`	none	on delete configuration.
`deleteLabel`	`string`	`"Remove badge"`	delete label configuration.
`dropdownOptions`	`BadgeOption[]`	none	dropdown options configuration.
`dropdownValue`	`string`	none	dropdown value configuration.
`onDropdownChange`	`((value: string) => void)`	none	on dropdown change configuration.
`asChild`	`boolean`	`false`	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Badge label.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

Badge

Interactive playground

Props

Badge props