badge.mdx

import Vue from 'vue' import LiveEditor from '../components/LiveEditor' import Code from '../components/CodeBlock' import SEO from '../components/SEO' import { CBadge, CStack, CFlex, CAvatar, CBox, CText } from '@chakra-ui/vue' Vue.component('CBadge', CBadge) Vue.component('CText',CText) Vue.component('CFlex', CFlex) Vue.component('CAvatar', CAvatar) Vue.component('CBox', CBox)

Badge

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

Import

<Code lang="javascript" code={import { CBadge } from "@chakra-ui/vue";} />

Usage

{` Default `}

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 `}

Badge Variants

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

{` Subtle Solid Outline `}

Composition

{` Jonathan Bakebwa New UI Engineer `}

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

{` Jonathan Bakebwa New `}

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