@zendeskgarden/css-buttons

@zendeskgarden/css-buttons

This package contains basic .c-btn component styling.

Installation

npm install @zendeskgarden/css-buttons

Usage

Once installed, button CSS can be accessed via postcss-import.

@import '@zendeskgarden/css-buttons';

Button CSS is intended to enhance the following HTML.

<button class="c-btn">CLICK ME</button>

Accessibility

If you are unable to use a native HTML <button>, be sure to add the appropriate role attribute.

<a class="c-btn" href="#" role="button">LINK BUTTON</a>

Also note that the element must be able to receive focus and can be activated using either the enter or space keys. Conversely, a disabled button should not be able to receive focus.

<a class="c-btn is-disabled" href="#" role="button" tabindex="-1">DISABLED LINK BUTTON</a>

Modifications

See http://zendeskgarden.github.io/css-components/buttons/ for various button modification classes.

Behavior

See the <Button> component for intended keyboard & blur-on-mouseup behavior.