Button

import { Button } from '@enmovil/ui-design-system';

A clickable button with Enmovil colour variants, visual types, sizes, a loading state and an optional icon.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Extra CSS class added to the button.
icon	ReactNode	No	—	—	Icon displayed in the button.
colorVariant	string	No	'primary'	'primary', 'success', 'neutral', 'info', 'teal', 'warn', 'soft-white', 'error'	Colour variant of the button.
href	string	No	—	—	Renders the button as a link to this URL.
htmlType	string	No	—	'button', 'submit', 'reset'	The type attribute of the underlying <button>, for example submit inside a form.
type	string	No	'primary'	'link', 'text', 'primary', 'default', 'dashed'	Visual type of the button.
iconPosition	string	No	—	'start', 'end'	Position of the icon relative to the label.
shape	string	No	—	'default', 'circle', 'round'	Shape of the button.
size	string	No	—	'small', 'middle', 'large'	Size of the button.
disabled	boolean	No	—	—	Disables the button.
loading	boolean | { delay?: number; icon?: ReactNode; }	No	—	—	Shows a loading indicator in place of the icon.
danger	boolean	No	—	—	Marks the button as a destructive action.
block	boolean	No	—	—	Makes the button fill the width of its container.

Other attributes

Button passes 290 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onFocus	FocusEventHandler<HTMLElement>	Fires when the button receives focus.
onBlur	FocusEventHandler<HTMLElement>	Fires when the button loses focus.
onClick	MouseEventHandler<HTMLElement>	Fires when the button is clicked. Does not fire while the button is disabled or loading.
onMouseEnter	MouseEventHandler<HTMLElement>	Fires when the pointer enters the button.
onMouseLeave	MouseEventHandler<HTMLElement>	Fires when the pointer leaves the button.

Children

children (ReactNode): The button label. Leave it empty for an icon-only button.

Usage notes

• Use colorVariant for meaning (for example error for a destructive action) and type for emphasis. They combine: type="default" colorVariant="error" gives an outlined red button.
• For an icon-only button, set icon, leave children empty, and give the button an aria-label so screen readers can announce it.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Primary example.

Loading playground…

Storybook

Open Button in Storybook to try every story with the full set of controls.