Badges - Clay

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

130

Error

1.111

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 label="8"></clay-badge>
<clay-badge label="87" style="secondary"></clay-badge>
<clay-badge label="91" style="info"></clay-badge>
<clay-badge label="130" style="danger"></clay-badge>
<clay-badge label="1.111" style="success"></clay-badge>
<clay-badge label="21" style="warning"></clay-badge>

<span class="badge badge-primary">
	<span class="badge-item badge-item-expand">8</span>
</span>

<span class="badge badge-secondary">
	<span class="badge-item badge-item-expand">87</span>
</span>

<span class="badge badge-info">
	<span class="badge-item badge-item-expand">91</span>
</span>

<span class="badge badge-danger">
	<span class="badge-item badge-item-expand">130</span>
</span>

<span class="badge badge-success">
	<span class="badge-item badge-item-expand">1.111</span>
</span>

<span class="badge badge-warning">
	<span class="badge-item badge-item-expand">21</span>
</span>

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