Badge.js
3.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Badge,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
const Badges = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Badge</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Badge</h1>
<Row>
<Col xs={12} md={8}>
<Widget
title={<h5>Badge <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
</p>
<h1>Example heading <Badge color="primary">Primary</Badge></h1>
<h2>Example heading <Badge color="info">Info</Badge></h2>
<h3>Example heading <Badge color="warning">Warning</Badge></h3>
<h4>Example heading <Badge color="success">Success</Badge></h4>
<h5>Example heading <Badge color="danger">Danger</Badge></h5>
<h6>Example heading <Badge color="secondary">Secondary</Badge></h6>
<p>Badges can be used as part of links or buttons to provide a counter.</p>
<Button color="primary">Notifications <Badge color="danger">4</Badge></Button>
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Pill <span className="fw-semi-bold">Badges</span></h5>}
close collapse
>
<p>
Use the <code>pill</code> property to make badges more rounded
(with a larger border-radius and additional horizontal padding).
</p>
<Badge className="mr-xs" color="primary" pill>Primary</Badge>
<Badge className="mr-xs" color="info" pill>Info</Badge>
<Badge className="mr-xs" color="warning" pill>Warning</Badge>
<Badge className="mr-xs" color="success" pill>Success</Badge>
<Badge className="mr-xs" color="danger" pill>Danger</Badge>
<Badge className="mr-xs" color="secondary" pill>Secondary</Badge>
<Badge className="mr-xs" color="light" pill>Light</Badge>
<Badge className="mr-xs" color="dark" pill>Dark</Badge>
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Pill <span className="fw-semi-bold">Badges</span></h5>}
close collapse
>
<p>
Using the contextual <code>href="#"</code> classes on
an <code><Badge></code> element quickly provide actionable badges with hover and focus states.
</p>
<Badge className="mr-xs" href="#" color="primary">Primary</Badge>
<Badge className="mr-xs" href="#" color="info">Info</Badge>
<Badge className="mr-xs" href="#" color="warning">Warning</Badge>
<Badge className="mr-xs" href="#" color="success">Success</Badge>
<Badge className="mr-xs" href="#" color="danger">Danger</Badge>
<Badge className="mr-xs" href="#" color="secondary">Secondary</Badge>
<Badge className="mr-xs" href="#" color="light">Light</Badge>
<Badge className="mr-xs" href="#" color="dark">Dark</Badge>
</Widget>
</Col>
</Row>
</div>
);
export default Badges;