Skip to content

Commit 6199d0e

Browse files
TechQueryTechQuery
committed
[add] Badge component
1 parent 5c910e2 commit 6199d0e

3 files changed

Lines changed: 339 additions & 59 deletions

File tree

‎document/source/components/Badge.mdx‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
---
2+
layout: docs
3+
title: Badge
4+
description: Documentation and examples for badges, our small count and labeling component.
5+
group: Components
6+
---
7+
8+
import { Badge } from 'boot-cell/source/Reminder/Badge';
9+
import { Button } from 'boot-cell/source/Form/Button';
10+
11+
import { Example } from '../../../source/component/Example';
12+
13+
## Example
14+
15+
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
16+
17+
<Example>
18+
<h1>
19+
Example heading <Badge kind="secondary">New</Badge>
20+
</h1>
21+
<h2>
22+
Example heading <Badge kind="secondary">New</Badge>
23+
</h2>
24+
<h3>
25+
Example heading <Badge kind="secondary">New</Badge>
26+
</h3>
27+
<h4>
28+
Example heading <Badge kind="secondary">New</Badge>
29+
</h4>
30+
<h5>
31+
Example heading <Badge kind="secondary">New</Badge>
32+
</h5>
33+
<h6>
34+
Example heading <Badge kind="secondary">New</Badge>
35+
</h6>
36+
</Example>
37+
38+
```TSX
39+
import { render, createCell, Fragment } from 'web-cell';
40+
import { Badge } from 'boot-cell/source/Reminder/Badge';
41+
42+
render(
43+
<Fragment>
44+
<h1>
45+
Example heading <Badge kind="secondary">New</Badge>
46+
</h1>
47+
<h2>
48+
Example heading <Badge kind="secondary">New</Badge>
49+
</h2>
50+
<h3>
51+
Example heading <Badge kind="secondary">New</Badge>
52+
</h3>
53+
<h4>
54+
Example heading <Badge kind="secondary">New</Badge>
55+
</h4>
56+
<h5>
57+
Example heading <Badge kind="secondary">New</Badge>
58+
</h5>
59+
<h6>
60+
Example heading <Badge kind="secondary">New</Badge>
61+
</h6>
62+
</Fragment>
63+
);
64+
```
65+
66+
Badges can be used as part of links or buttons to provide a counter.
67+
68+
<Example>
69+
<Button>
70+
Notifications <Badge kind="light">4</Badge>
71+
</Button>
72+
</Example>
73+
74+
```TSX
75+
import { render, createCell } from 'web-cell';
76+
import { Badge } from 'boot-cell/source/Reminder/Badge';
77+
import { Button } from 'boot-cell/source/Form/Button';
78+
79+
render(
80+
<Button>
81+
Notifications <Badge kind="light">4</Badge>
82+
</Button>
83+
);
84+
```
85+
86+
Note that depending on how they are used, badges may be confusing for users of screen readers
87+
and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose,
88+
these users will simply be presented with the content of the badge.
89+
Depending on the specific situation, these badges may seem like random additional words or
90+
numbers at the end of a sentence, link, or button.
91+
92+
Unless the context is clear (as with the “Notifications” example, where it is understood that
93+
the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.
94+
95+
<Example>
96+
<Button>
97+
Profile <Badge kind="light">9</badge>
98+
<span class="sr-only">unread messages</span>
99+
</Button>
100+
</Example>
101+
102+
```TSX
103+
import { render, createCell } from 'web-cell';
104+
import { Badge } from 'boot-cell/source/Reminder/Badge';
105+
import { Button } from 'boot-cell/source/Form/Button';
106+
107+
render(
108+
<Button>
109+
Profile <Badge kind="light">9</badge>
110+
<span class="sr-only">unread messages</span>
111+
</Button>
112+
);
113+
```
114+
115+
## Contextual variations
116+
117+
Add any of the below mentioned `kind` property values to change the appearance of a badge.
118+
119+
<Example>
120+
<Badge>Primary</Badge>
121+
<Badge kind="secondary">Secondary</Badge>
122+
<Badge kind="success">Success</Badge>
123+
<Badge kind="danger">Danger</Badge>
124+
<Badge kind="warning">Warning</Badge>
125+
<Badge kind="info">Info</Badge>
126+
<Badge kind="light">Light</Badge>
127+
<Badge kind="dark">Dark</Badge>
128+
</Example>
129+
130+
```TSX
131+
import { render, createCell, Fragment } from 'web-cell';
132+
import { Badge } from 'boot-cell/source/Reminder/Badge';
133+
134+
render(
135+
<Fragment>
136+
<Badge>Primary</Badge>
137+
<Badge kind="secondary">Secondary</Badge>
138+
<Badge kind="success">Success</Badge>
139+
<Badge kind="danger">Danger</Badge>
140+
<Badge kind="warning">Warning</Badge>
141+
<Badge kind="info">Info</Badge>
142+
<Badge kind="light">Light</Badge>
143+
<Badge kind="dark">Dark</Badge>
144+
</Fragment>
145+
);
146+
```
147+
148+
> ##### Conveying meaning to assistive technologies
149+
>
150+
> Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies –
151+
> such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text),
152+
> or is included through alternative means, such as additional text hidden with the `.sr-only` class.
153+
154+
## Pill badges
155+
156+
Use the `pill` property to make badges more rounded (with a larger border-radius and additional horizontal padding).
157+
Useful if you miss the badges from v3.
158+
159+
<Example>
160+
<Badge pill>Primary</Badge>
161+
<Badge pill kind="secondary">
162+
Secondary
163+
</Badge>
164+
<Badge pill kind="success">
165+
Success
166+
</Badge>
167+
<Badge pill kind="danger">
168+
Danger
169+
</Badge>
170+
<Badge pill kind="warning">
171+
Warning
172+
</Badge>
173+
<Badge pill kind="info">
174+
Info
175+
</Badge>
176+
<Badge pill kind="light">
177+
Light
178+
</Badge>
179+
<Badge pill kind="dark">
180+
Dark
181+
</Badge>
182+
</Example>
183+
184+
```TSX
185+
import { render, createCell, Fragment } from 'web-cell';
186+
import { Badge } from 'boot-cell/source/Reminder/Badge';
187+
188+
render(
189+
<Fragment>
190+
<Badge pill>Primary</Badge>
191+
<Badge pill kind="secondary">
192+
Secondary
193+
</Badge>
194+
<Badge pill kind="success">
195+
Success
196+
</Badge>
197+
<Badge pill kind="danger">
198+
Danger
199+
</Badge>
200+
<Badge pill kind="warning">
201+
Warning
202+
</Badge>
203+
<Badge pill kind="info">
204+
Info
205+
</Badge>
206+
<Badge pill kind="light">
207+
Light
208+
</Badge>
209+
<Badge pill kind="dark">
210+
Dark
211+
</Badge>
212+
</Fragment>
213+
);
214+
```
215+
216+
## Links
217+
218+
Using `href` property on `<Badge />` quickly provide actionable badges with hover and focus states.
219+
220+
<Example>
221+
<Badge href=".">Primary</Badge>
222+
<Badge href="." kind="secondary">
223+
Secondary
224+
</Badge>
225+
<Badge href="." kind="success">
226+
Success
227+
</Badge>
228+
<Badge href="." kind="danger">
229+
Danger
230+
</Badge>
231+
<Badge href="." kind="warning">
232+
Warning
233+
</Badge>
234+
<Badge href="." kind="info">
235+
Info
236+
</Badge>
237+
<Badge href="." kind="light">
238+
Light
239+
</Badge>
240+
<Badge href="." kind="dark">
241+
Dark
242+
</Badge>
243+
</Example>
244+
245+
```TSX
246+
import { render, createCell, Fragment } from 'web-cell';
247+
import { Badge } from 'boot-cell/source/Reminder/Badge';
248+
249+
render(
250+
<Fragment>
251+
<Badge href=".">Primary</Badge>
252+
<Badge href="." kind="secondary">
253+
Secondary
254+
</Badge>
255+
<Badge href="." kind="success">
256+
Success
257+
</Badge>
258+
<Badge href="." kind="danger">
259+
Danger
260+
</Badge>
261+
<Badge href="." kind="warning">
262+
Warning
263+
</Badge>
264+
<Badge href="." kind="info">
265+
Info
266+
</Badge>
267+
<Badge href="." kind="light">
268+
Light
269+
</Badge>
270+
<Badge href="." kind="dark">
271+
Dark
272+
</Badge>
273+
</Fragment>
274+
);
275+
```

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"name": "bootcell-document",
3-
"version": "0.23.0",
3+
"version": "0.24.0",
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
66
"boot-cell": "^1.0.0-rc.23",
77
"cell-router": "^2.0.0-rc.8",
88
"classnames": "^2.2.6",
9-
"github-web-widget": "^3.0.0-beta.4",
9+
"github-web-widget": "^3.0.0-beta.5",
1010
"lodash.groupby": "^4.6.0",
1111
"mobx": "^5.15.4",
1212
"mobx-web-cell": "^0.3.0",

0 commit comments

Comments
 (0)