Badge

Badge is a component that emphasizes the status of an item to make it immediately recognizable.

Import

import { Badge } from "@yamada-ui/react"

Copied!

Usage

Editable example

<Badge>New</Badge>

Copied!

Change Variant

Editable example

<Wrap gap="md">
  <Badge variant="subtle" colorScheme="primary">
    Primary
  </Badge>
  <Badge variant="solid" colorScheme="secondary">
    Secondary
  </Badge>
  <Badge variant="outline" colorScheme="success">
    Success
  </Badge>
</Wrap>

Copied!

Change Color Scheme

Editable example

<VStack>
  <Wrap gap="md">
    <Badge variant="subtle" colorScheme="primary">
      Primary
    </Badge>
    <Badge variant="subtle" colorScheme="secondary">
      Secondary
    </Badge>
    <Badge variant="subtle" colorScheme="success">
      Success
    </Badge>
    <Badge variant="subtle" colorScheme="warning">
      Warning
    </Badge>
    <Badge variant="subtle" colorScheme="danger">
      Danger
    </Badge>
    <Badge variant="subtle" colorScheme="link">
      Link
    </Badge>
    <Badge variant="subtle" colorScheme="gray">
      Gray
    </Badge>
    <Badge variant="subtle" colorScheme="neutral">
      Neutral
    </Badge>
    <Badge variant="subtle" colorScheme="red">
      Red
    </Badge>
    <Badge variant="subtle" colorScheme="rose">
      Rose
    </Badge>
    <Badge variant="subtle" colorScheme="pink">
      Pink
    </Badge>
    <Badge variant="subtle" colorScheme="orange">
      Orange
    </Badge>
    <Badge variant="subtle" colorScheme="amber">
      Amber
    </Badge>
    <Badge variant="subtle" colorScheme="yellow">
      Yellow
    </Badge>
    <Badge variant="subtle" colorScheme="lime">
      Lime
    </Badge>
    <Badge variant="subtle" colorScheme="green">
      Green
    </Badge>
    <Badge variant="subtle" colorScheme="emerald">
      Emerald
    </Badge>
    <Badge variant="subtle" colorScheme="teal">
      Teal
    </Badge>
    <Badge variant="subtle" colorScheme="cyan">
      Cyan
    </Badge>
    <Badge variant="subtle" colorScheme="sky">
      Sky
    </Badge>
    <Badge variant="subtle" colorScheme="blue">
      Blue
    </Badge>
    <Badge variant="subtle" colorScheme="indigo">
      Indigo
    </Badge>
    <Badge variant="subtle" colorScheme="violet">
      Violet
    </Badge>
    <Badge variant="subtle" colorScheme="purple">
      Purple
    </Badge>
    <Badge variant="subtle" colorScheme="fuchsia">
      Fuchsia
    </Badge>
  </Wrap>

  <Wrap gap="md">
    <Badge variant="solid" colorScheme="primary">
      Primary
    </Badge>
    <Badge variant="solid" colorScheme="secondary">
      Secondary
    </Badge>
    <Badge variant="solid" colorScheme="success">
      Success
    </Badge>
    <Badge variant="solid" colorScheme="warning">
      Warning
    </Badge>
    <Badge variant="solid" colorScheme="danger">
      Danger
    </Badge>
    <Badge variant="solid" colorScheme="link">
      Link
    </Badge>
    <Badge variant="solid" colorScheme="gray">
      Gray
    </Badge>
    <Badge variant="solid" colorScheme="neutral">
      Neutral
    </Badge>
    <Badge variant="solid" colorScheme="red">
      Red
    </Badge>
    <Badge variant="solid" colorScheme="rose">
      Rose
    </Badge>
    <Badge variant="solid" colorScheme="pink">
      Pink
    </Badge>
    <Badge variant="solid" colorScheme="orange">
      Orange
    </Badge>
    <Badge variant="solid" colorScheme="amber">
      Amber
    </Badge>
    <Badge variant="solid" colorScheme="yellow">
      Yellow
    </Badge>
    <Badge variant="solid" colorScheme="lime">
      Lime
    </Badge>
    <Badge variant="solid" colorScheme="green">
      Green
    </Badge>
    <Badge variant="solid" colorScheme="emerald">
      Emerald
    </Badge>
    <Badge variant="solid" colorScheme="teal">
      Teal
    </Badge>
    <Badge variant="solid" colorScheme="cyan">
      Cyan
    </Badge>
    <Badge variant="solid" colorScheme="sky">
      Sky
    </Badge>
    <Badge variant="solid" colorScheme="blue">
      Blue
    </Badge>
    <Badge variant="solid" colorScheme="indigo">
      Indigo
    </Badge>
    <Badge variant="solid" colorScheme="violet">
      Violet
    </Badge>
    <Badge variant="solid" colorScheme="purple">
      Purple
    </Badge>
    <Badge variant="solid" colorScheme="fuchsia">
      Fuchsia
    </Badge>
  </Wrap>

  <Wrap gap="md">
    <Badge variant="outline" colorScheme="primary">
      Primary
    </Badge>
    <Badge variant="outline" colorScheme="secondary">
      Secondary
    </Badge>
    <Badge variant="outline" colorScheme="success">
      Success
    </Badge>
    <Badge variant="outline" colorScheme="warning">
      Warning
    </Badge>
    <Badge variant="outline" colorScheme="danger">
      Danger
    </Badge>
    <Badge variant="outline" colorScheme="link">
      Link
    </Badge>
    <Badge variant="outline" colorScheme="gray">
      Gray
    </Badge>
    <Badge variant="outline" colorScheme="neutral">
      Neutral
    </Badge>
    <Badge variant="outline" colorScheme="red">
      Red
    </Badge>
    <Badge variant="outline" colorScheme="rose">
      Rose
    </Badge>
    <Badge variant="outline" colorScheme="pink">
      Pink
    </Badge>
    <Badge variant="outline" colorScheme="orange">
      Orange
    </Badge>
    <Badge variant="outline" colorScheme="amber">
      Amber
    </Badge>
    <Badge variant="outline" colorScheme="yellow">
      Yellow
    </Badge>
    <Badge variant="outline" colorScheme="lime">
      Lime
    </Badge>
    <Badge variant="outline" colorScheme="green">
      Green
    </Badge>
    <Badge variant="outline" colorScheme="emerald">
      Emerald
    </Badge>
    <Badge variant="outline" colorScheme="teal">
      Teal
    </Badge>
    <Badge variant="outline" colorScheme="cyan">
      Cyan
    </Badge>
    <Badge variant="outline" colorScheme="sky">
      Sky
    </Badge>
    <Badge variant="outline" colorScheme="blue">
      Blue
    </Badge>
    <Badge variant="outline" colorScheme="indigo">
      Indigo
    </Badge>
    <Badge variant="outline" colorScheme="violet">
      Violet
    </Badge>
    <Badge variant="outline" colorScheme="purple">
      Purple
    </Badge>
    <Badge variant="outline" colorScheme="fuchsia">
      Fuchsia
    </Badge>
  </Wrap>
</VStack>

Copied!

Edit this page on GitHub

PreviousAreaChart NextBarChart