Button - ZUI Documentation

Summary

Buttons should be used to trigger actions. This can range from submitting a form to linking to another page. It is possible to place icons on buttons as well. A button should either be an anchor element, a button element or an input element.

Name	Description	Default Value
`role`	The role attribute must be set to the value button. It is used to identify the element as a command button the the browser. This is especially needed for anchor elements that are turned into buttons. No values have been documented for this attribute.
`data-zui-button-loader-timeout`	The timeout in milliseconds before the loader icon is shown. Default is 1000. No values have been documented for this attribute.

Name	Description
`zui-button`	The zui-button class turns a non-button element into a button. This class should be used on anchors.
`zui-button-dropdown`	The zui-button-dropdown class turns a button into a button with a dropdown menu.
`zui-button-link`	The zui-button-link class turns a button into a link. This is useful for tertiary buttons such as cancel links.
`zui-button-loader`	The zui-button-loader class adds a loader icon next to the button to indicate that a background task is running.
`zui-button-primary`	The zui-button-primary class turns a button into a primary button. A primary button is the button that is the most important button.
`zui-button-split-main`	The zui-button-split-main class identifies the left part of a split button. It should always be used in combination with the zui-button-split-more class.
`zui-button-split-more`	The zui-button-split-more class identifies the button that will show the dropdown menu. It should always be used in combination with the zui-button-split-main class.
`zui-button-subtle`	The zui-button-subtle class turns a button into a subtle button. It looks like a link but when you hover the button it looks like a normal button. Subtle buttons should always be used in combination with icons.

Example

Button

Markup

<button>Button</button>

<a href="" class="zui-button" role="button">Button</a>

<div class="zui-button-group">
    <button class="zui-button-split-main">Split button</button>
    <button class="zui-button-split-more" 
            id="dropdown-split-more-button" 
            aria-controls="dropdown-split-more" 
            aria-haspopup="true" 
            aria-expanded="false">Split button more</button>
</div>

<div class="zui-button-group">
    <a href="#" class="zui-button zui-button-split-main">Split button</a>
    <a href="#" 
       class="zui-button zui-button-split-more" 
       id="dropdown-split-more2-button" 
       aria-controls="dropdown-split-more2" 
       aria-haspopup="true" 
       aria-expanded="false">Split button more</a>
</div>

<div id="dropdown-split-more" class="zui-dropdown-menu" aria-hidden="true">
    <ul>
        <li><a href="http://example.com/">Menu item 1</a></li>
        <li><a href="http://example.com/">Menu item 2</a></li>
        <li><a href="http://example.com/">Menu item 3</a></li>
    </ul>
</div>

<div id="dropdown-split-more2" class="zui-dropdown-menu" aria-hidden="true">
    <ul>
        <li><a href="http://example.com/">Menu item 1</a></li>
        <li><a href="http://example.com/">Menu item 2</a></li>
        <li><a href="http://example.com/">Menu item 3</a></li>
    </ul>
</div>

<button id="dropdown-more-button" 
        class="zui-button-dropdown" 
        aria-controls="dropdown-more" 
        aria-haspopup="true" 
        aria-expanded="false">Dropdown button</button>
<div id="dropdown-more" class="dropdown-menu" aria-hidden="true">
    <ul>
        <li><a href="http://example.com/">Menu item 1</a></li>
        <li><a href="http://example.com/">Menu item 2</a></li>
        <li><a href="http://example.com/">Menu item 3</a></li>
    </ul>
</div>

<a href="#" id="dropdown-more2-button" 
   class="zui-button zui-button-dropdown"
   aria-controls="dropdown-more2" 
   aria-haspopup="true" 
   aria-expanded="false">Dropdown button</a>
<div id="dropdown-more2" class="dropdown-menu" aria-hidden="true">
    <ul>
        <li><a href="http://example.com/">Menu item 1</a></li>
        <li><a href="http://example.com/">Menu item 2</a></li>
        <li><a href="http://example.com/">Menu item 3</a></li>
    </ul>
</div>

<button class="zui-button-subtle">
    <i class="zui-icon zui-icon-gear"></i>
    Subtle button
</button>

<a href="#" class="zui-button zui-button-subtle">
    <i class="zui-icon zui-icon-gear"></i>
    Subtle Button
</a>

<div class="zui-button-group">
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
</div>

<div class="zui-button-group">
    <a href="#" class="zui-button">Button</a>
    <a href="#" class="zui-button">Button</a>
    <a href="#" class="zui-button">Button</a>
</div>