# Badge (/ui-kit/components/badge)





<mainStory.WithControl />

<ComponentShowcase title="VARIANT_PRESET_MAP.default.variant" description="VARIANT_PRESET_MAP.default.description" code="defaultCode">
  <DefaultBadgeExample />
</ComponentShowcase>

<ComponentShowcase title="VARIANT_PRESET_MAP.plain.variant" description="VARIANT_PRESET_MAP.plain.description" code="plainCode">
  <PlainBadgeExample />
</ComponentShowcase>

<ComponentShowcase title="VARIANT_PRESET_MAP.secondary.variant" description="VARIANT_PRESET_MAP.secondary.description" code="secondaryCode">
  <SecondaryBadgeExample />
</ComponentShowcase>

<ComponentShowcase title="VARIANT_PRESET_MAP.accent.variant" description="VARIANT_PRESET_MAP.accent.description" code="accentCode">
  <AccentBadgeExample />
</ComponentShowcase>

<ComponentShowcase title="VARIANT_PRESET_MAP.destructive.variant" description="VARIANT_PRESET_MAP.destructive.description" code="destructiveCode">
  <DestructiveBadgeExample />
</ComponentShowcase>

<ComponentShowcase title="VARIANT_PRESET_MAP.outline.variant" description="VARIANT_PRESET_MAP.outline.description" code="outlineCode">
  <OutlineBadgeExample />
</ComponentShowcase>