components-pills - EAC design system

Pills

State variations

En stock

Stock bas

Non disponible

Promo

<div class="status-pill status-pill--default p">
	<div class="svg-icon svg-icon--default svg-icon-controls-stop">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="controls-stop"><path id="Vector" d="M18.75 3.75H5.25C4.42157 3.75 3.75 4.42157 3.75 5.25V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V5.25C20.25 4.42157 19.5784 3.75 18.75 3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
	</div>
	<span class="status-pill__label">En stock</span>
</div>

<div class="status-pill status-pill--warning status-pill--default p">
	<div class="svg-icon svg-icon--default svg-icon-alert-circle">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="alert-circle" clip-path="url(#clip0_3_1640)"><path id="Vector" d="M12 16.5C11.9258 16.5 11.8533 16.522 11.7917 16.5632C11.73 16.6044 11.6819 16.663 11.6535 16.7315C11.6252 16.8 11.6177 16.8754 11.6322 16.9482C11.6467 17.0209 11.6824 17.0877 11.7348 17.1402C11.7873 17.1926 11.8541 17.2283 11.9268 17.2428C11.9996 17.2573 12.075 17.2498 12.1435 17.2215C12.212 17.1931 12.2706 17.145 12.3118 17.0833C12.353 17.0217 12.375 16.9492 12.375 16.875C12.375 16.7755 12.3355 16.6802 12.2652 16.6098C12.1948 16.5395 12.0995 16.5 12 16.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12 13.5V5.25" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path id="Vector_3" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/></g><defs><clipPath id="clip0_3_1640"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
	</div>
	<span class="status-pill__label">Stock bas</span>
</div>

<div class="status-pill status-pill--error status-pill--default p">
	<div class="svg-icon svg-icon--default svg-icon-controls-stop">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="controls-stop"><path id="Vector" d="M18.75 3.75H5.25C4.42157 3.75 3.75 4.42157 3.75 5.25V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V5.25C20.25 4.42157 19.5784 3.75 18.75 3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
	</div>
	<span class="status-pill__label">Non disponible</span>
</div>

<div class="status-pill status-pill--highlight-primary status-pill--default p">
	<div class="svg-icon svg-icon--default svg-icon-discount-circle">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="discount-circle" clip-path="url(#clip0_3_2771)"><path id="Vector" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M8.25 15.75L15.75 8.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M15 16.5C15.8284 16.5 16.5 15.8284 16.5 15C16.5 14.1716 15.8284 13.5 15 13.5C14.1716 13.5 13.5 14.1716 13.5 15C13.5 15.8284 14.1716 16.5 15 16.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2771"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
	</div>
	<span class="status-pill__label">Promo</span>
</div>

<div class="status-pill status-pill--highlight-secondary status-pill--default p">
	<div class="svg-icon svg-icon--default svg-icon-discount-circle">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="discount-circle" clip-path="url(#clip0_3_2771)"><path id="Vector" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M8.25 15.75L15.75 8.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M15 16.5C15.8284 16.5 16.5 15.8284 16.5 15C16.5 14.1716 15.8284 13.5 15 13.5C14.1716 13.5 13.5 14.1716 13.5 15C13.5 15.8284 14.1716 16.5 15 16.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2771"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
	</div>
	<span class="status-pill__label">Promo</span>
</div>

Size variations

En stock

<div class="status-pill status-pill--default p">
	<div class="svg-icon svg-icon--default svg-icon-controls-stop">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="controls-stop"><path id="Vector" d="M18.75 3.75H5.25C4.42157 3.75 3.75 4.42157 3.75 5.25V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V5.25C20.25 4.42157 19.5784 3.75 18.75 3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
	</div>
	<span class="status-pill__label">En stock</span>
</div>

<div class="status-pill status-pill--small p">
	<div class="svg-icon svg-icon--small svg-icon-controls-stop">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="controls-stop"><path id="Vector" d="M18.75 3.75H5.25C4.42157 3.75 3.75 4.42157 3.75 5.25V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V5.25C20.25 4.42157 19.5784 3.75 18.75 3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
	</div>
	<span class="status-pill__label">En stock</span>
</div>

Counter variation

<div class="status-pill status-pill--counter status-pill--small p">
	<span class="status-pill__label">12</span>
</div>

<div class="status-pill status-pill--counter status-pill--small p">
	<span class="status-pill__label">8</span>
</div>

List of arguments for pills

Argument	Type	Description	Possible Values
label	string	The text label displayed inside the status pill.	—
state	array	One or more visual states applied to the pill. Multiple can be combined.	success, error, warning, highlight-primary, highlight-secondary, counter
size	string	Defines the size of the status pill and its icon.	default, small
icon	string	The name of the SVG icon to display in the pill (e.g., 'controls-stop', 'discount-circle', 'alert-circle').	—

Design System

Pills

State variations

Size variations

Counter variation

List of arguments for pills

Basics

Components

Templates