components-buttons - EAC design system

Buttons

Composition variations

Defines the core composition of the button.

<a href="/" target="_self" class="btn btn--primary btn--default">
	<span class="btn__content">
				<span class="btn__label">Icon right</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

<a href="/" target="_self" class="btn btn--primary btn--default">
	<span class="btn__content">
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
				<span class="btn__label">Icon left</span>
			</span>
		</a>

<a href="/" target="_self" class="btn btn--primary btn--default">
	<span class="btn__content">
				<span class="btn__label">Text only</span>
			</span>
		</a>

<a href="/" target="_self" class="btn btn--primary btn--icon btn--default">
	<span class="btn__content">
				<span class="u-sr-accessible">Icon only</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

Variation with a notification pill

Defines a notification pill in the button or attached to it.

With counter

Floating counter

<a href="/" target="_self" class="btn btn--primary btn--default">
	<span class="btn__content">
				<span class="btn__label">With counter</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
								<div class="status-pill status-pill--counter status-pill--small p">
	<span class="status-pill__label">14</span>
</div>				</a>

<a href="/" target="_self" class="btn btn--primary btn--default pill-floating">
	<span class="btn__content">
				<span class="btn__label">Floating counter</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
								<div class="status-pill status-pill--counter status-pill--small p">
	<span class="status-pill__label">14</span>
</div>				</a>

Defines a tooltip attached to the button.

With tooltip

This is a helper box

The dialog box will position itself where there is the more space available.

<a href="/" target="_self" data-tooltip-instance="tooltip-trigger-1" data-tooltip-placement="auto" data-tooltip-theme="secondary" data-tooltip-event-trigger="mouseenter click" class="btn btn--primary btn--default tooltip-trigger">
	<span class="btn__content">
				<span class="btn__label">With tooltip</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>
	
	<div class="tooltip-target-1 tooltip_content">
		<h4>This is a helper box</h4>
		<p>The dialog box will position itself where there is the more space available.</p>
	</div>

Appearance variations

Defines the appearance of the button.

<a href="/" target="_self" class="btn btn--primary btn--default">
	<span class="btn__content">
				<span class="btn__label">Primary</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

<a href="/" target="_self" class="btn btn--secondary btn--default">
	<span class="btn__content">
				<span class="btn__label">Secondary</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

<a href="/" target="_self" class="btn btn--transparent btn--default">
	<span class="btn__content">
				<span class="btn__label">Transparent</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

<a href="/" target="_self" class="btn btn--warning btn--default">
	<span class="btn__content">
				<span class="btn__label">Warning</span>
					<div class="svg-icon svg-icon-bin-2-alternate">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="bin-2-alternate"><path id="Vector" d="M1.75098 6.368L22.292 2.002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M13.6 0.783L9.20005 1.718C9.00683 1.75864 8.82354 1.83703 8.66068 1.94866C8.49783 2.0603 8.35861 2.20299 8.25103 2.36855C8.14344 2.53411 8.0696 2.71928 8.03374 2.91344C7.99788 3.1076 8.0007 3.30693 8.04205 3.5L8.35405 4.968L15.69 3.408L15.378 1.941C15.3374 1.7482 15.2591 1.56529 15.1478 1.40274C15.0364 1.24019 14.8941 1.10117 14.729 0.993634C14.5638 0.886096 14.3792 0.812144 14.1855 0.776003C13.9918 0.739862 13.7928 0.742239 13.6 0.783Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M10.751 18V10.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M15.251 18V10.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_5" d="M18.6261 6H21.2511L19.8661 21.874C19.8349 22.25 19.6632 22.6004 19.3852 22.8554C19.1072 23.1104 18.7433 23.2513 18.3661 23.25H7.6311C7.25489 23.2498 6.89249 23.1082 6.61577 22.8533C6.33905 22.5985 6.1682 22.2489 6.1371 21.874L5.1001 9.377" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
			</div>
			</span>
		</a>

<a href="/" target="_self" class="btn btn--like btn--icon btn--default">
	<span class="btn__content">
				<span class="u-sr-accessible">Like</span>
					<div class="svg-icon svg-icon-love-it">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="love-it"><path id="Vector" d="M12 21.844L2.41202 11.844C1.56935 11.002 1.01318 9.91609 0.82238 8.74023C0.631579 7.56437 0.815836 6.35828 1.34902 5.29303C1.75108 4.48915 2.33839 3.7923 3.06257 3.25991C3.78674 2.72752 4.62706 2.37483 5.51427 2.23088C6.40149 2.08693 7.31021 2.15586 8.16557 2.43198C9.02092 2.70809 9.79843 3.1835 10.434 3.81903L12 5.38403L13.566 3.81903C14.2016 3.1835 14.9791 2.70809 15.8345 2.43198C16.6898 2.15586 17.5985 2.08693 18.4858 2.23088C19.373 2.37483 20.2133 2.72752 20.9375 3.25991C21.6617 3.7923 22.249 4.48915 22.651 5.29303C23.1835 6.35787 23.3674 7.56324 23.1768 8.73843C22.9862 9.91362 22.4307 10.9991 21.589 11.841L12 21.844Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
			</div>
			</span>
		</a>

<a href="/" target="_self" disabled class="btn btn--primary btn--default">
	<span class="btn__content">
				<span class="btn__label">Disabled</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

Size variations

Defines the size of the button.

Default

Small

<a href="/" target="_self" class="btn btn--primary btn--default">
	<span class="btn__content">
				<span class="btn__label">Default</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

<a href="/" target="_self" class="btn btn--primary btn--small">
	<span class="btn__content">
				<span class="btn__label">Small</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

Dark theme variations

Defines the appearance on dark theme.

Primary dark

Secondary dark

Transparent dark

<a href="/" target="_self" class="btn btn--primary btn--dark btn--default">
	<span class="btn__content">
				<span class="btn__label">Primary dark</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

<a href="/" target="_self" class="btn btn--secondary btn--dark btn--default">
	<span class="btn__content">
				<span class="btn__label">Secondary dark</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

<a href="/" target="_self" class="btn btn--transparent btn--dark btn--default">
	<span class="btn__content">
				<span class="btn__label">Transparent dark</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>

List of arguments for buttons

Argument	Type	Description	Possible Values
label	string	The text label of the button.	—
href	string	The URL the button links to.	—
target	array	Specifies where to open the linked document.	_self, _blank
skin	array	Defines the visual style of the button.	primary, secondary, transparent, warning, like
disabled	boolean	Indicates whether the button is disabled.	—
icon-only	boolean	Indicates if the button is icon-only.	—
icon	component	Specifies the icon to be used in the button. See how to include icons here: TODO:LinkToIcon	—
icon-position	array	Defines the position of the icon.	left, right
theme	string	Specifies the theme of the button.	—
size	array	Defines the size of the button.	default, small
additional-classes	string	Additional CSS classes for the button.	—
custom-attributes	string	Custom data attribute for the button.	—
additional-content	string	Custom content that can be added to the button.	—

Design System

Buttons

Composition variations

Variation with a notification pill

Variation with a tooltip

This is a helper box

Appearance variations

Size variations

Dark theme variations

List of arguments for buttons

Basics

Components

Templates