Badge

The CBadge component is used to highlight an item's status for quick recognition.

Import#

import { CBadge } from "@chakra-ui/vue";

Usage#

Default

Editable Example

<c-badge>Default</c-badge>

Badge Color#

Pass the variant-color prop to customize the color of the CBadge. variant-color can be any color key that exists in the $chakra.theme.colors. Here $chakra.theme is your theme object. Learn more about theming

Default

Success

Removed

New

Editable Example

<c-badge mx="2">Default</c-badge>
<c-badge mx="2" variant-color="green">Success</c-badge>
<c-badge mx="2" variant-color="red">Removed</c-badge>
<c-badge mx="2" variant-color="indigo">New</c-badge>

Badge Variants#

Pass the variant prop and set it to either subtle, solid, or outline to get a different style.

Subtle

Solid

Outline

Editable Example

<c-badge mx="2" variant="subtle" variant-color="green">Subtle</c-badge>
<c-badge mx="2" variant="solid" variant-color="green">Solid</c-badge>
<c-badge mx="2" variant="outline" variant-color="green">Outline</c-badge>

Composition#

Jonathan Bakebwa

New

UI Engineer

Editable Example

<c-flex>
  <c-avatar src="https://bit.ly/chakra-jonathan-bakebwa" />
  <c-box ml="3">
    <c-text font-weight="bold">
      Jonathan Bakebwa
      <c-badge ml="1" variant-color="green">
        New
      </c-badge>
    </c-text>
    <c-text font-size="sm">UI Engineer</c-text>
  </c-box>
</c-flex>

You can also change the size of the badge by passing fontSize prop.

Jonathan Bakebwa

New

Editable Example

<c-text font-weight="bold">
  Jonathan Bakebwa
  <c-badge ml="1" font-size="1em" variant-color="green">
    New
  </c-badge>
</c-text>

Props#

The CBadge component composes CBox component so you can pass props for Box.

Name	Type	Default	Description
`variant`	`solid`, `subtle`, `outline`	`subtle`	The style variant of the badge
`variant-color`	`string`	`gray`	The color scheme to use for the badge. Must be a key in `$chakra.theme.colors`

Slots#

Name	Description
default	Text rendered inside badge

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!