Button - CSS Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Construction
The CSS component uses <button>
or <a>
tags with the z-button
HTML custom attribute.
z-button
The z-button
parameter will use the primary
type as default, matching the primary type of the specifications.
There are four more types of buttons, secondary, negative, positive, and link
Both, background and foreground color can be customized using the --z-button--bg
and --z-button--color
custom tokens.
The z-button
attribute has two more optional modifiers that can be applied in order after the type, using colon (:
) as the separator: The pattern would be: <type><?:size><?:round>
The first modifier is
size
defines the size of the button. The value ism
, being omitted from the parameter. The possible values for size are:xs
,s
orl
. Check the size section.The second modifier is
round
, that can receive the valueround
to implement a round styling to the button.This configuration is also applied by default if the button doesn't have text. For example, only having an icon:
TIP
Make sure the content of the round button it's short and concise. Best approach would be to use a simple call to action icon
icon
The attribute icon
it's useful to insert a specific CTA icon. Check the icon list here. This attribute will receive the name of the icon to be show. You can use both solid
or line
(outlined) version.
icon-right
This attribute will display the icon
on the right side of the text.
disabled
The attribute disabled
will block the interaction with the component.
loading
A loading indicator can be added to a button by setting the loading
attribute.
wide
The attribute wide
it's used when the button
it's expected to fill the whole width of the parent container.
Button as link
Button can directly be used as if instead of using the <button>
tag we use the <a>
anchor tag with the attribute role
set as button
.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Button.css" />
Code
html
<!-- For the example it's used the Medium size, make sure you try different sizes.
You can change z-button attribute using: "primary", "secondary", "negative", "positive", "alert" or "link" types, followed by the desired size-->
<button z-button="primary">Button</button>
<button z-button="primary" icon="edit:line" icon-right>Button</button>
<button z-button="primary" icon="edit:line">Button</button>
<button z-button="primary" loading>Button</button>
<button z-button="primary:round" icon="edit:line"></button>