Tag

Interactive labels for categories, filters, and selections. Includes a removable variant with __remove button, and a selectable toggle variant with --selectable and aria-pressed.

Default and outline

<span class="ln-tag ln-tag--primary">Default</span>
<span class="ln-tag ln-tag--outline ln-tag--primary">Outline</span>
<span class="ln-tag ln-tag--success">Success</span>
<span class="ln-tag ln-tag--danger">Danger</span>

DefaultOutlineSuccessDanger

Removable tag

<span class="ln-tag ln-tag--primary" data-ln-dismissible>
  React
  <button class="ln-tag__remove" data-ln-dismiss aria-label="Remove">&times;</button>
</span>

React

Reference

Class	Description	Responsive
`.ln-tag`	Inline tag / chip	No
`.ln-tag__icon`	Leading icon	No
`.ln-tag__label`	Tag label text	No
`.ln-tag__remove`	Dismiss / remove button	No
`.ln-tag--selectable`	Toggle-selectable tag	No