coreui-free-react-admin-template

1
import React from 'react'
2
import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react'
3
import { DocsExample } from 'src/components'
4

5
const Badges = () => {
6
  return (
7
    <CRow>
8
      <CCol lg={6}>
9
        <CCard className="mb-4">
10
          <CCardHeader>
11
            <strong>React Badges</strong> <small>Dismissing</small>
12
          </CCardHeader>
13
          <CCardBody>
14
            <p className="text-body-secondary small">
15
              Bootstrap badge scale to suit the size of the parent element by using relative font
16
              sizing and <code>em</code> units.
17
            </p>
18
            <DocsExample href="components/badge">
19
              <h1>
20
                Example heading <CBadge color="secondary">New</CBadge>
21
              </h1>
22
              <h2>
23
                Example heading <CBadge color="secondary">New</CBadge>
24
              </h2>
25
              <h3>
26
                Example heading <CBadge color="secondary">New</CBadge>
27
              </h3>
28
              <h4>
29
                Example heading <CBadge color="secondary">New</CBadge>
30
              </h4>
31
              <h5>
32
                Example heading <CBadge color="secondary">New</CBadge>
33
              </h5>
34
              <h6>
35
                Example heading <CBadge color="secondary">New</CBadge>
36
              </h6>
37
            </DocsExample>
38
            <p className="text-body-secondary small">
39
              Badges can be used as part of links or buttons to provide a counter.
40
            </p>
41
            <DocsExample href="components/badge">
42
              <CButton color="primary">
43
                Notifications <CBadge color="secondary">4</CBadge>
44
              </CButton>
45
            </DocsExample>
46
            <p className="text-body-secondary small">
47
              Remark that depending on how you use them, badges may be complicated for users of
48
              screen readers and related assistive technologies.
49
            </p>
50
            <p className="text-body-secondary small">
51
              Unless the context is clear, consider including additional context with a visually
52
              hidden piece of additional text.
53
            </p>
54
            <DocsExample href="components/badge">
55
              <CButton color="primary">
56
                Profile <CBadge color="secondary">9</CBadge>
57
                <span className="visually-hidden">unread messages</span>
58
              </CButton>
59
            </DocsExample>
60
          </CCardBody>
61
        </CCard>
62
      </CCol>
63
      <CCol lg={6}>
64
        <CCard className="mb-4">
65
          <CCardHeader>
66
            <strong>React Badges</strong> <small>Contextual variations</small>
67
          </CCardHeader>
68
          <CCardBody>
69
            <p className="text-body-secondary small">
70
              Add any of the below-mentioned <code>color</code> props to modify the presentation of
71
              a badge.
72
            </p>
73
            <DocsExample href="components/badge#contextual-variations">
74
              <CBadge color="primary">primary</CBadge>
75
              <CBadge color="success">success</CBadge>
76
              <CBadge color="danger">danger</CBadge>
77
              <CBadge color="warning">warning</CBadge>
78
              <CBadge color="info">info</CBadge>
79
              <CBadge color="light">light</CBadge>
80
              <CBadge color="dark">dark</CBadge>
81
            </DocsExample>
82
          </CCardBody>
83
        </CCard>
84
        <CCard className="mb-4">
85
          <CCardHeader>
86
            <strong>React Badges</strong> <small>Pill badges</small>
87
          </CCardHeader>
88
          <CCardBody>
89
            <p className="text-body-secondary small">
90
              Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make badges rounded.
91
            </p>
92
            <DocsExample href="components/badge#pill-badges">
93
              <CBadge color="primary" shape="rounded-pill">
94
                primary
95
              </CBadge>
96
              <CBadge color="success" shape="rounded-pill">
97
                success
98
              </CBadge>
99
              <CBadge color="danger" shape="rounded-pill">
100
                danger
101
              </CBadge>
102
              <CBadge color="warning" shape="rounded-pill">
103
                warning
104
              </CBadge>
105
              <CBadge color="info" shape="rounded-pill">
106
                info
107
              </CBadge>
108
              <CBadge color="light" shape="rounded-pill">
109
                light
110
              </CBadge>
111
              <CBadge color="dark" shape="rounded-pill">
112
                dark
113
              </CBadge>
114
            </DocsExample>
115
          </CCardBody>
116
        </CCard>
117
      </CCol>
118
    </CRow>
119
  )
120
}
121

122
export default Badges
123