Button - CSS Component ​

The Button component can be used imported from:

Playground ​

Construction ​

The CSS component uses <button> or <a> tags with the z-button HTML custom attribute.

z-button ​

type ​

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

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>

size ​

The first modifier is size defines the size of the button. The value is m, being omitted from the parameter. The possible values for size are: xs, s or l. Check the size section.

round ​

The second modifier is round, that can receive the value round 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.

Only icon ​

If we use only the icon, the config can still be set:

Flags ​

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.

There's an option of using spread value to distribute the items with the elements apart:

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.

Special uses ​

Back to top ​

For a smooth behavior in the navigation, use this CSS code:

css
html {
  scroll-behavior: smooth;
}

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​