Buttons

There are three types of buttons: primary, secondary, and “ghost”. The button styles can be applied to buttons and/or links that look like buttons.

To render the proper semantic element, provide the kind of behavior that is expected: action or link value. If the button performs an action, it is rendered as a button. If the button links somewhere, it renders as a <a>.

The button macro will default to link, which will render an <a> tag that looks like a button. If you provide action as a value for behavior, it indicates that it is a button that performs an action and is therefore rendered as a <button type="button">.

Usage

<!-- import the macro in the page(s) you want to render the button(s) in -->


<!-- use the macro -->

{ { button({ behavior: "action", type: "primary", text: "Do Something" }) } }

<!-- defaults to behavior: link -->
{ { button({ type: "primary", text: "Go somewhere", url: "/url/to/somewhere/" }) } }

Examples

This is a button button I perform an action I perform an action

I link somewhere Secondary Button Ghost Button