Components

Component

Badge

Small text label for object state, category, or status.

ReactReact Native4 props
PreviewReact
NewStableReviewBreakingReact Native

Imports

import { Badge } from "@hozorica/hods-react";
import { Badge } from "@hozorica/hods-react-native";

Props

PropTypeDescription
sizemedium | largeBadge density. Defaults to medium.
variantsolid | weak | outlineVisual emphasis.
tonebrand | critical | informative | neutral | positive | warningSemantic color tone.
asChildbooleanWeb-only child composition.

Platform Support

React

Inline-flex label with truncation, tone, variant, and asChild support.

React Native

View/Text label with shared tone, variant, and size props.

Usage

<Badge tone="brand" variant="solid">New</Badge>

Notes

  • Long badge text truncates with ellipsis.
  • Use solid for high-emphasis state, weak for metadata, and outline for secondary status.
  • Badge is for short labels, not for interactive actions.