Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Semantic variants
  • Sizes
  • Polymorphic link
  • Recommendations
  • Usage boundaries
  • API reference

Feedback

Badge

Marks concise content with semantic variants and optional polymorphic rendering.

idle

Usage

import { Badge } from "@mizen-labs/ui";

Examples

Semantic variants

Use badges to make compact status and category values scannable.

Sizes

Polymorphic link

Render a badge as a link when the status needs a destination.

Recommendations

GuidancePractice
Do

Use short labels for status or category. Pair semantic color with text that carries the meaning.

Usage boundaries

GuidanceBoundary
Scope

Use Button or Link for explicit actions. A badge must not be the only indication of a critical state.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
variant"default" | "destructive" | "info" | "outline" | "secondary" | "success" | "warning" | "brand""default"Sets the semantic appearance of the badge.
size"default" | "sm" | "lg""default"Sets the badge dimensions.
childrenReactNode—Visible badge content.
renderReactElement | RenderFunction—Composes the badge onto another element for polymorphic rendering.
PreviousAlertNextEmpty
ShippedIn reviewBlockedDraft
QueuedFailedIn reviewDraftArchivedSyncedNeeds reviewFeatured
UnreadIn progressFeatured
Review status