Button

Buttons are clickable elements that are used to perform an action.

Usage

Use a Button to enable actions or decisions that are important to a user, such as:
- submitting a form;
- confirming a change;
- triggering a new element to appear on the page;
- specifying a new or next step in a process.
Button can be used for actions, like ‘Load more’, ‘Filters’ etc.

Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page (with the exception of the back and forward buttons).
Do not style Buttons as links.
Do not use leading and trailing icons at the same time.

	Item	Component type	Content type	Notes
1	Leading icon		SVG file	OPTIONAL
2	Trailing icon		SVG file	OPTIONAL
3	Button label	Typography	Text	MANDATORY

Buttons come with two sizes: large and small.

Buttons have five states that define their appearance: Default, Hover, Focus, Active and Disabled.

Name	Control	Description
`variant`	`primary` `secondary` `primary-icon` `secondary-icon`	The variant to use.
`size`	`small` `large`	The size of the component.
`disabled`	`False` `True`	If `true`, the component is disabled.
`children`		The content of the component.
`iconPrefix`	`iconPrefix : {` `props : {` `icon : "alert"` `}` `}`	Element placed before the children.
`iconSuffix`	`iconSuffix : {` `props : {` `icon : "arrowDown"` `}` `}`	Element placed after the children.
`aria-label`
`className`	`Set string`
`onClick`	`-`

Button labels should use uppercase.
Button labels should be as short as possible, while clearly explaining the action the button triggers.
For maximum legibility, a text label should remain on a single line.
Names like “Read more“, “Learn more“, etc. should be avoided.

n/a

n/a

A very brief description