badge.mdx

import SEO from '../components/SEO'

Badge

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

Import

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

Usage

<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

<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 to either subtle, solid, or outline to get a different style.

<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

<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.

<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