Labels

Description

Labels categorize information, providing quick recognition.

Check the Lexicon Labels Pattern for a more in-depth look at the motivations and proper usage of this component.

Label Text Status Pending Rejected Approved

{call ClayLabel.render}
	{param label: 'Label Text' /}
{/call}

{call ClayLabel.render}
	{param label: 'Status' /}
	{param style: 'info' /}
{/call}

{call ClayLabel.render}
	{param label: 'Pending' /}
	{param style: 'warning' /}
{/call}

{call ClayLabel.render}
	{param label: 'Rejected' /}
	{param style: 'danger' /}
{/call}

{call ClayLabel.render}
	{param label: 'Approved' /}
	{param style: 'success' /}
{/call}

<clay-label label="Label text"></clay-label>

<clay-label label="Status" style="info"></clay-label>

<clay-label label="Pending" style="warning"></clay-label>

<clay-label label="Rejected" style="danger"></clay-label>

<clay-label label="Approved" style="success"></clay-label>

<span class="label label-secondary">
	<span class="label-item label-item-expand">Label Text</span>
</span>

<span class="label label-info">
	<span class="label-item label-item-expand">Status</span>
</span>

<span class="label label-warning">
	<span class="label-item label-item-expand">Pending</span>
</span>

<span class="label label-danger">
	<span class="label-item label-item-expand">Rejected</span>
</span>

<span class="label label-success">
	<span class="label-item label-item-expand">Approved</span>
</span>

Sizes

Use label-lg to make the label larger, or use the mixin label-size($sassMap) to create a custom sized label:

Normal Label Large Label

{call ClayLabel.render}
	{param label: 'Normal Label' /}
{/call}

{call ClayLabel.render}
	{param label: 'Large Label' /}
	{param size: 'lg' /}
{/call}

<clay-label label="Normal Label"></clay-label>

<clay-label label="Large Label" size="lg"></clay-label>

<span class="label label-secondary">
	<span class="label-item label-item-expand">Normal Label</span>
</span>

<span class="label label-lg label-secondary">
	<span class="label-item label-item-expand">Large Label</span>
</span>

Variations

Label simple

The simple label is used to identify, tag content, show a status, filter content, or even provide navigation to elements. It can be used with status colors.

Label Text

{call ClayLabel.render}
	{param label: 'Label Text' /}
{/call}

<clay-label label="Normal Label"></clay-label>

<span class="label label-secondary">
	<span class="label-item label-item-expand">Label Text</span>
</span>

Label removable

Removable labels are used in filter bars, categories, etc. They are always displayed in the default size and without status color. Only use them in the default size.

Label Text

{call ClayLabel.render}
	{param closeable: true /}
	{param label: 'Label Text' /}
{/call}

<clay-label closeable="true" label="Label Text"></clay-label>

<span class="label label-dismissible label-secondary">
	<span class="label-item label-item-expand">Label Text</span>
	<span class="label-item label-item-after">
		<button aria-label="Close" class="close" type="button">
			<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#times"></use>
			</svg>
		</button>
	</span>
</span>

Label with link

Add a link to a label to link to related content in a site.

Label Text

{call ClayLabel.render}
	{param href: '#1' /}
	{param label: 'Label Text' /}
{/call}

<clay-label href="#1" label="Label Text"></clay-label>

<a class="label label-primary" href="#1">
	<span class="label-item label-item-expand">Label Text</span>
</a>

API

Property	Description	Type	Required	Default
closeable	Flag to indicate if the label is closeable.	bool	false	false
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
href	HREF in label.	string\|undefined	false	undefined
id	Id to be applied to the element.	string\|undefined	false	undefined
label	The label of the badge element.	html\|string\|undefined	false	undefined
size	The size of the label element.	string\|undefined	false	undefined
spritemap	The path to the SVG spritemap file containing the icons.	string\|undefined	false	undefined
style	Label style color.	bool\|string	false	secondary
tabIndex	Flag to indicate if the element can be focused.	string\|undefined	false	undefined
truncate	Flag to truncate the label.	bool	false	false