Heartwood

Tag 

<!-- Default -->
<div class="tag tag-primary">
    <span class="tag__text">Spruced Up Shave</span>
    <button class="btn tag__btn  btn-icon-only " type="button">
			<span class="btn__inner">
				<span class="btn__icon-wrapper">
					<?xml version="1.0" encoding="utf-8"?>
					<svg
						class='btn__icon '
						version="1.1"
						id="Layer_1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
						x="0px"
						y="0px"
						width="20px"
						height="20px"
						viewBox="0 0 20 20"
						enable-background="new 0 0 20 20"
						xml:space="preserve">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8334 5.3415L14.6584 4.1665L10.0001 8.82484L5.34175 4.1665L4.16675 5.3415L8.82508 9.99984L4.16675 14.6582L5.34175 15.8332L10.0001 11.1748L14.6584 15.8332L15.8334 14.6582L11.1751 9.99984L15.8334 5.3415Z"/>
					</svg>
				</span>
				
			</span>	
	</button>
</div>


<!-- Small -->
<div class="tag tag-primary tag-small">
    <span class="tag__text">Spruced Up Shave</span>
    <button class="btn btn-small tag__btn  btn-icon-only " type="button">
			<span class="btn__inner">
				<span class="btn__icon-wrapper">
					<?xml version="1.0" encoding="utf-8"?>
					<svg
						class='btn__icon '
						version="1.1"
						id="Layer_1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
						x="0px"
						y="0px"
						width="20px"
						height="20px"
						viewBox="0 0 20 20"
						enable-background="new 0 0 20 20"
						xml:space="preserve">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8334 5.3415L14.6584 4.1665L10.0001 8.82484L5.34175 4.1665L4.16675 5.3415L8.82508 9.99984L4.16675 14.6582L5.34175 15.8332L10.0001 11.1748L14.6584 15.8332L15.8334 14.6582L11.1751 9.99984L15.8334 5.3415Z"/>
					</svg>
				</span>
				
			</span>	
	</button>
</div>


<!-- Secondary -->
<div class="tag tag-secondary">
    <span class="tag__text">Spruced Up Shave</span>
    <button class="btn tag__btn  btn-icon-only " type="button">
			<span class="btn__inner">
				<span class="btn__icon-wrapper">
					<?xml version="1.0" encoding="utf-8"?>
					<svg
						class='btn__icon '
						version="1.1"
						id="Layer_1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
						x="0px"
						y="0px"
						width="20px"
						height="20px"
						viewBox="0 0 20 20"
						enable-background="new 0 0 20 20"
						xml:space="preserve">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8334 5.3415L14.6584 4.1665L10.0001 8.82484L5.34175 4.1665L4.16675 5.3415L8.82508 9.99984L4.16675 14.6582L5.34175 15.8332L10.0001 11.1748L14.6584 15.8332L15.8334 14.6582L11.1751 9.99984L15.8334 5.3415Z"/>
					</svg>
				</span>
				
			</span>	
	</button>
</div>


<!-- Secondary Small -->
<div class="tag tag-secondary tag-small">
    <span class="tag__text">Spruced Up Shave</span>
    <button class="btn btn-small tag__btn  btn-icon-only " type="button">
			<span class="btn__inner">
				<span class="btn__icon-wrapper">
					<?xml version="1.0" encoding="utf-8"?>
					<svg
						class='btn__icon '
						version="1.1"
						id="Layer_1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
						x="0px"
						y="0px"
						width="20px"
						height="20px"
						viewBox="0 0 20 20"
						enable-background="new 0 0 20 20"
						xml:space="preserve">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8334 5.3415L14.6584 4.1665L10.0001 8.82484L5.34175 4.1665L4.16675 5.3415L8.82508 9.99984L4.16675 14.6582L5.34175 15.8332L10.0001 11.1748L14.6584 15.8332L15.8334 14.6582L11.1751 9.99984L15.8334 5.3415Z"/>
					</svg>
				</span>
				
			</span>	
	</button>
</div>


<div class="tag {{class}}{{#if isSmall}} tag-small{{/if}}">
	<span class="tag__text">{{{tagText}}}</span>
	{{#if isSmall}}
	{{> @button className="btn-small tag__btn" width="20" height="20" icon='<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8334 5.3415L14.6584 4.1665L10.0001 8.82484L5.34175 4.1665L4.16675 5.3415L8.82508 9.99984L4.16675 14.6582L5.34175 15.8332L10.0001 11.1748L14.6584 15.8332L15.8334 14.6582L11.1751 9.99984L15.8334 5.3415Z"/>'}}
	{{else}}
	{{> @button className="tag__btn" width="20" height="20" icon='<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8334 5.3415L14.6584 4.1665L10.0001 8.82484L5.34175 4.1665L4.16675 5.3415L8.82508 9.99984L4.16675 14.6582L5.34175 15.8332L10.0001 11.1748L14.6584 15.8332L15.8334 14.6582L11.1751 9.99984L15.8334 5.3415Z"/>'}}
	{{/if}}
</div>
 
/* Default */
{
  "tagText": "Spruced Up Shave",
  "class": "tag-primary"
}


/* Small */
{
  "tagText": "Spruced Up Shave",
  "class": "tag-primary",
  "isSmall": true
}


/* Secondary */
{
  "tagText": "Spruced Up Shave",
  "class": "tag-secondary"
}


/* Secondary Small */
{
  "tagText": "Spruced Up Shave",
  "class": "tag-secondary",
  "isSmall": true
}

Tag

Tags are visual indications that content in a view is being filtered, and they allow the user to change the applied filters.