@@ -21,63 +21,79 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
2121 <td ><code >{ ` (ElementType & "symbol") ` } </code >, <code >{ ` (ElementType & "object") ` } </code >, <code >{ ` (ElementType & "span") ` } </code >, <code >{ ` (ElementType & "slot") ` } </code >, <code >{ ` (ElementType & "style") ` } </code >, <code >{ ` ... 174 more ... ` } </code >, <code >{ ` (ElementType & FunctionComponent\< ...>) ` } </code ></td >
2222 </tr >
2323 <tr >
24- <td colSpan = " 3" >Component used for the root node. Either a string to use a HTML element or a component.</td >
24+ <td colSpan = " 3" >
25+ <p >Component used for the root node. Either a string to use a HTML element or a component.</p >
26+ </td >
2527 </tr >
2628 <tr id = " cbadge-className" >
2729 <td className = " text-primary fw-semibold" >className<a href = " #cbadge-className" aria-label = " CBadge className permalink" className = " anchor-link after" >#</a ></td >
2830 <td >undefined</td >
2931 <td ><code >{ ` string ` } </code ></td >
3032 </tr >
3133 <tr >
32- <td colSpan = " 3" >A string of all className you want applied to the component.</td >
34+ <td colSpan = " 3" >
35+ <p >A string of all className you want applied to the component.</p >
36+ </td >
3337 </tr >
3438 <tr id = " cbadge-color" >
3539 <td className = " text-primary fw-semibold" >color<a href = " #cbadge-color" aria-label = " CBadge color permalink" className = " anchor-link after" >#</a ></td >
3640 <td >undefined</td >
3741 <td ><code >{ ` 'primary' ` } </code >, <code >{ ` 'secondary' ` } </code >, <code >{ ` 'success' ` } </code >, <code >{ ` 'danger' ` } </code >, <code >{ ` 'warning' ` } </code >, <code >{ ` 'info' ` } </code >, <code >{ ` 'dark' ` } </code >, <code >{ ` 'light' ` } </code >, <code >{ ` string ` } </code ></td >
3842 </tr >
3943 <tr >
40- <td colSpan = " 3" >Sets the color context of the component to one of CoreUI’s themed colors.</td >
44+ <td colSpan = " 3" >
45+ <p >Sets the color context of the component to one of CoreUI’s themed colors.</p >
46+ </td >
4147 </tr >
4248 <tr id = " cbadge-position" >
4349 <td className = " text-primary fw-semibold" >position<a href = " #cbadge-position" aria-label = " CBadge position permalink" className = " anchor-link after" >#</a ></td >
4450 <td >undefined</td >
4551 <td ><code >{ ` "top-start" ` } </code >, <code >{ ` "top-end" ` } </code >, <code >{ ` "bottom-end" ` } </code >, <code >{ ` "bottom-start" ` } </code ></td >
4652 </tr >
4753 <tr >
48- <td colSpan = " 3" >Position badge in one of the corners of a link or button.</td >
54+ <td colSpan = " 3" >
55+ <p >Position badge in one of the corners of a link or button.</p >
56+ </td >
4957 </tr >
5058 <tr id = " cbadge-shape" >
5159 <td className = " text-primary fw-semibold" >shape<a href = " #cbadge-shape" aria-label = " CBadge shape permalink" className = " anchor-link after" >#</a ></td >
5260 <td >undefined</td >
5361 <td ><code >{ ` 'rounded' ` } </code >, <code >{ ` 'rounded-top' ` } </code >, <code >{ ` 'rounded-end' ` } </code >, <code >{ ` 'rounded-bottom' ` } </code >, <code >{ ` 'rounded-start' ` } </code >, <code >{ ` 'rounded-circle' ` } </code >, <code >{ ` 'rounded-pill' ` } </code >, <code >{ ` 'rounded-0' ` } </code >, <code >{ ` 'rounded-1' ` } </code >, <code >{ ` 'rounded-2' ` } </code >, <code >{ ` 'rounded-3' ` } </code >, <code >{ ` string ` } </code ></td >
5462 </tr >
5563 <tr >
56- <td colSpan = " 3" >Select the shape of the component.</td >
64+ <td colSpan = " 3" >
65+ <p >Select the shape of the component.</p >
66+ </td >
5767 </tr >
5868 <tr id = " cbadge-size" >
5969 <td className = " text-primary fw-semibold" >size<a href = " #cbadge-size" aria-label = " CBadge size permalink" className = " anchor-link after" >#</a ></td >
6070 <td >undefined</td >
6171 <td ><code >{ ` "sm" ` } </code ></td >
6272 </tr >
6373 <tr >
64- <td colSpan = " 3" >Size the component small.</td >
74+ <td colSpan = " 3" >
75+ <p >Size the component small.</p >
76+ </td >
6577 </tr >
6678 <tr id = " cbadge-textBgColor" >
6779 <td className = " text-primary fw-semibold" >textBgColor<a href = " #cbadge-textBgColor" aria-label = " CBadge textBgColor permalink" className = " anchor-link after" >#</a ><span className = " badge bg-success" >5.0.0+</span ></td >
6880 <td >undefined</td >
6981 <td ><code >{ ` 'primary' ` } </code >, <code >{ ` 'secondary' ` } </code >, <code >{ ` 'success' ` } </code >, <code >{ ` 'danger' ` } </code >, <code >{ ` 'warning' ` } </code >, <code >{ ` 'info' ` } </code >, <code >{ ` 'dark' ` } </code >, <code >{ ` 'light' ` } </code >, <code >{ ` string ` } </code ></td >
7082 </tr >
7183 <tr >
72- <td colSpan = " 3" >Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td >
84+ <td colSpan = " 3" >
85+ <p >Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</p >
86+ </td >
7387 </tr >
7488 <tr id = " cbadge-textColor" >
7589 <td className = " text-primary fw-semibold" >textColor<a href = " #cbadge-textColor" aria-label = " CBadge textColor permalink" className = " anchor-link after" >#</a ></td >
7690 <td >undefined</td >
7791 <td ><code >{ ` 'primary' ` } </code >, <code >{ ` 'secondary' ` } </code >, <code >{ ` 'success' ` } </code >, <code >{ ` 'danger' ` } </code >, <code >{ ` 'warning' ` } </code >, <code >{ ` 'info' ` } </code >, <code >{ ` 'dark' ` } </code >, <code >{ ` 'light' ` } </code >, <code >{ ` 'primary-emphasis' ` } </code >, <code >{ ` 'secondary-emphasis' ` } </code >, <code >{ ` 'success-emphasis' ` } </code >, <code >{ ` 'danger-emphasis' ` } </code >, <code >{ ` 'warning-emphasis' ` } </code >, <code >{ ` 'info-emphasis' ` } </code >, <code >{ ` 'light-emphasis' ` } </code >, <code >{ ` 'body' ` } </code >, <code >{ ` 'body-emphasis' ` } </code >, <code >{ ` 'body-secondary' ` } </code >, <code >{ ` 'body-tertiary' ` } </code >, <code >{ ` 'black' ` } </code >, <code >{ ` 'black-50' ` } </code >, <code >{ ` 'white' ` } </code >, <code >{ ` 'white-50' ` } </code >, <code >{ ` string ` } </code ></td >
7892 </tr >
7993 <tr >
80- <td colSpan = " 3" >Sets the text color of the component to one of CoreUI’s themed colors.</td >
94+ <td colSpan = " 3" >
95+ <p >Sets the text color of the component to one of CoreUI’s themed colors.</p >
96+ </td >
8197 </tr >
8298 </tbody >
8399 </table >