button without states

This <span> elements look like a button beacuse of a class e-bolt-button and its modifiers. They don't have any interactive features like :hover or :active which belongs to an <a> and a <button> semantic tags.

This is not a button nor a link This is not a button nor a link This is not a button nor a link This is not a button nor a link

These are examples of semantic link with their interactive states.

This is a true href with states classes This is a true href with states classes This is a true href with states classes This is a true href with states classes

These are examples of semantic button with their interactive states.


This is an example of semantic input with type=[file] and its interactive states.

button background colors

Background color can be set on the button using background_color prop. This has effect only on the buttons which hierarchy is primary

theme white

theme black

theme gray-xlight

theme navy-dark

theme navy

theme navy-light

theme teal

theme yellow

theme orange

theme pink

theme wine

theme berry

theme violet

button loading state

Click on the buttons to see loading state in action (simulates loading lasting 3 seconds)

Loading state on all hierarchy buttons

Loading state on all hierarchy buttons using dark theme

Loading state on all sizes

Loading state on all sizes using icon only

Loading state on buttons with icons

Loading state on buttons with custom background color

Loading state doesnt work for links. Note this element below is a link styled as button

loading state