# Badge

A badge is a special label used to call out specific information.

# Colors

primary secondary success info warning danger light dark
<ks-badge color="primary">primary</ks-badge>
<ks-badge color="secondary">secondary</ks-badge>
<ks-badge color="success">success</ks-badge>
<ks-badge color="info">info</ks-badge>
<ks-badge color="warning">warning</ks-badge>
<ks-badge color="danger">danger</ks-badge>
<ks-badge color="light">light</ks-badge>
<ks-badge color="dark">dark</ks-badge>

# Hollow

primary secondary success info warning danger light dark
<ks-badge color="primary" hollow>primary</ks-badge>
<ks-badge color="secondary" hollow>secondary</ks-badge>
<ks-badge color="success" hollow>success</ks-badge>
<ks-badge color="info" hollow>info</ks-badge>
<ks-badge color="warning" hollow>warning</ks-badge>
<ks-badge color="danger" hollow>danger</ks-badge>
<ks-badge color="light" hollow>light</ks-badge>
<ks-badge color="dark" hollow>dark</ks-badge>


As you can see, some of the hollow badges above are hard to see against a white background. Please make sure you use these cautiously and test them for sufficient color contrast.

# Accessibility

When using the default badge, the background and text colors should have sufficient contrast to meet the WCAG 2.0 AA standard. As noted above, please use caution when using the hollow badge and validate the contrast ratio are accessible.

# Properties

Property Attribute Type Default Description
color color "danger", "dark", "info", "light", "link", "primary", "secondary", "success", or "warning" 'primary' the color of the badge based on the theme color palette
hollow hollow boolean undefined display badge with color border and text with a transparent background