Button

Basic usage

Themes

The Button component comes with three built-in themes: accent, neutral and danger.

Negative Mode

The Button component supports a negative mode, suitable for areas with dark background.

Content

The Button component supports a text, an icon, or a combination of the two.

Shapes

The Button component comes with two built-in shapes: squared and rounded.

Sizes

The Button component comes with five built-in sizes.

Width

The width of the Button component can be adapted to meet your needs.

Multiline label

If the available space is not enough to contain its label, the Button component automatically wraps the text on multiple lines.

Disabled state

Buttons can be disabled to show users their unavailability.

Loading state

A Loading” state can be activated to show users that an action is in progress.

Active state

When your Button represents a switch or a toggle, you can take advantage of its Active state to let the user know the current selection value.

Toolbar

You can easily build a toolbar by combining Button components and making their states interconnected

Floating action buttons

You can use the Button component as a floating action. By applying an Elemental built-in shadow, you will get an added visual depth.