svg-heart

ZUI Buttons

zui-button zui-button-dropdown zui-button-group

zui-button

Button types

Primary Secondary Link

Button types disabled

Primary Secondary Link

Button style variations

Button with a zui-icon Button with a zui-icon
Button with a zui-icon (right) Button with a zui-icon (right)
Danger Delete
Primary block-level button
Secondary block-level button
Link block-level button

Button style variations disabled

Button with a zui-icon Button with a zui-icon
Button with a zui-icon (right) Button with a zui-icon (right)
Danger Delete
Primary block-level button
Secondary block-level button
Link block-level button

Buttons with various embedding methods

HTML button element

Icons

svg icon
Button with an SVG icon
zui-svg icon
Button with a zui-svg icon
zui-icon icon
Button with a zui-icon

zui-button-dropdown

Positioning

Which luchadores would you like to fight?

Luchadores Left Tag in Esqueleto Nipple Twist Dynasty Luchadores Right Tag in Esqueleto Nipple Twist Dynasty

Disabled

Disabled dropdown

🤑 Field trip to Monte Albán

Disabled option

🤑 Field trip to Monte Albán Field trip to Monte Albán

Stylin'

Ramses quiere pelear!
Defend yourself!
Lucha Hurl insults

Icon only

Icon-only button dropdown example

Delete Delete

What would you like to do with all of your winnings?

🤑 Field trip to Monte Albán

Labelled icon

Share Share

zui-button-group

Primary & Secondary

One Two Three Delete One Two Three Delete

Disabled

One Two Three Four Five One Two Three

Slotted variations

Download Email Share Delete
Facebook Share Delete