Skip to content

Commit b30643e

Browse files
D-LiteD-Lite
authoredJul 16, 2023
Badge Component (#42)
* feat: badge component documentation * refactor: change name casing badge * refactor: change name casing badge
1 parent 44c3ac2 commit b30643e

File tree

6 files changed

+160
-0
lines changed

6 files changed

+160
-0
lines changed
 

‎components/content/examples/badge/BaseBadge.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<CBadge>Default</CBadge>
3+
</template>

‎components/content/examples/badge/ColorBadge.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<CStack direction='row'>
3+
<CBadge>Default</CBadge>
4+
<CBadge color-scheme='green'>Success</CBadge>
5+
<CBadge color-scheme='red'>Removed</CBadge>
6+
<CBadge color-scheme='purple'>New</CBadge>
7+
</CStack>
8+
</template>
9+

‎components/content/examples/badge/CompositionBadge.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<CFlex>
3+
<CAvatar src="https://bit.ly/chakra-jonathan-bakebwa" />
4+
<CBox ml="3">
5+
<CText font-weight="bold">
6+
Jonathan Bakebwa
7+
<CBadge ml="1" color-scheme="green">
8+
New
9+
</CBadge>
10+
</CText>
11+
<CText font-size="sm">UI Engineer</CText>
12+
</CBox>
13+
</CFlex>
14+
</template>

‎components/content/examples/badge/CompositionBadgeTwo.vue

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<CText font-weight="bold">
3+
Jonathan Bakebwa
4+
<CBadge ml="1" font-size="1em" color-scheme="green">
5+
New
6+
</CBadge>
7+
</CText>
8+
</template>

‎components/content/examples/badge/VariantBadge.vue

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<CStack direction='row'>
3+
<CBadge mx="2" variant="subtle" color-scheme="green">Subtle</CBadge>
4+
<CBadge mx="2" variant="solid" color-scheme="green">Solid</CBadge>
5+
<CBadge mx="2" variant="outline" color-scheme="green">Outline</CBadge>
6+
</CStack>
7+
</template>
8+

‎content/4.components/badge.md

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
title: Badge
3+
description: Badge Component
4+
version: 2.0+
5+
---
6+
7+
# Badge
8+
9+
The `CBadge` component is used to highlight an item's status for quick recognition.
10+
11+
## Import
12+
13+
```js
14+
import { CBadge } from '@chakra-ui/vue-next';
15+
```
16+
17+
## Usage
18+
19+
::showcase
20+
::base-badge
21+
::
22+
::
23+
24+
```html
25+
<CBadge>Default</CBadge>
26+
```
27+
28+
### Badge Color
29+
30+
Pass the `color-scheme` 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.
31+
<!-- once styled system theming is up: Learn more about theming -->
32+
33+
::showcase
34+
::wrap{align="center"}
35+
::color-badge
36+
::
37+
38+
```html
39+
<CStack direction='row'>
40+
<CBadge>Default</CBadge>
41+
<CBadge color-scheme='green'>Success</CBadge>
42+
<CBadge color-scheme='red'>Removed</CBadge>
43+
<CBadge color-scheme='purple'>New</CBadge>
44+
</CStack>
45+
```
46+
47+
### Badge Variants
48+
49+
Pass the `variant` prop and set it to either `subtle`, `solid`, or `outline` to get a different style.
50+
51+
::showcase
52+
::variant-badge
53+
::
54+
::
55+
56+
```html
57+
<CStack direction='row'>
58+
<CBadge mx="2" variant="subtle" color-scheme="green">Subtle</CBadge>
59+
<CBadge mx="2" variant="solid" color-scheme="green">Solid</CBadge>
60+
<CBadge mx="2" variant="outline" color-scheme="green">Outline</CBadge>
61+
</CStack>
62+
```
63+
64+
## Compositon
65+
66+
67+
::showcase
68+
::composition-badge
69+
::
70+
::
71+
72+
```html
73+
<CFlex>
74+
<CAvatar src="https://bit.ly/chakra-jonathan-bakebwa" />
75+
<CBox ml="3">
76+
<CText font-weight="bold">
77+
Jonathan Bakebwa
78+
<CBadge ml="1" color-scheme="green">
79+
New
80+
</CBadge>
81+
</CText>
82+
<CText font-size="sm">UI Engineer</CText>
83+
</CBox>
84+
</CFlex>
85+
```
86+
87+
You can also change the size of the badge by passing `font-size` prop.
88+
89+
::showcase
90+
::composition-badge-two
91+
::
92+
::
93+
94+
```html
95+
<CText font-weight="bold">
96+
Jonathan Bakebwa
97+
<CBadge ml="1" font-size="1em" variant-color="green">
98+
New
99+
</CBadge>
100+
</CText>
101+
```
102+
103+
## Props
104+
105+
> The `CBadge` component composes `CBox` component so you can pass props for `Box`.
106+
107+
| Name | Type | Default | Description |
108+
|-----------------|------------------------------|----------|--------------------------------------------------------------------------------|
109+
| `variant` | `solid`, `subtle`, `outline` | `subtle` | The style variant of the badge |
110+
| `variant-color` | `string` | `gray` | The color scheme to use for the badge. Must be a key in `$chakra.theme.colors` |
111+
112+
113+
## Slots
114+
115+
| Name | Description |
116+
|---------|----------------------------|
117+
| default | Text rendered inside badge |
118+

0 commit comments

Comments
 (0)