Description
Badges help highlight important information, such as notifications or new and unread messages. Badges have circular borders and are only used to specify a number.
Check the Lexicon Badges Pattern for a more in-depth look at the motivations and proper usage of this component.
Clay Badges
Primary
Secondary
Info
Error
Success
Warning
{call ClayBadge.render}
{param label: '8' /}
{/call}
{call ClayBadge.render}
{param label: '87' /}
{param style: 'secondary' /}
{/call}
{call ClayBadge.render}
{param label: '91' /}
{param style: 'info' /}
{/call}
{call ClayBadge.render}
{param label: '130' /}
{param style: 'danger' /}
{/call}
{call ClayBadge.render}
{param label: '1.111' /}
{param style: 'success' /}
{/call}
{call ClayBadge.render}
{param label: '21' /}
{param style: 'warning' /}
{/call}Clay Badge Sizes
Badge Sizes have been removed. Use the clay-badge-size($sassMap) mixin to create custom badge sizes for your app.
API
| Property | Description | Type | Required | Default |
|---|---|---|---|---|
data |
Data to add to the element. | object | false | undefined |
defaultEventHandler |
Object that wires events with default listeners | object|undefined | false | undefined |
elementClasses |
CSS classes to be applied to the element. | string|undefined | false | undefined |
id |
Id to be applied to the element. | string|undefined | false | undefined |
label |
The label of the badge element. | string | true | undefined |
style |
Badge style color. | string | false | primary |