Buttons
Default
Use the class, button for this default style button. If you are using the <button> element, always specify a type. When using the <a> tag, include role="button" for accessibility. Each button is available in multiple sizes, take note of examples for classes.
<a class="m-b-05-xs button button--large-xs" href>Large</a>
<a class="m-b-05-xs button" href>Normal</a>
<a class="m-b-05-xs button button--small-xs" href>Small</a>
<a class="m-b-05-xs button button--xsmall-xs" href>X-Small</a>Size Across Breakpoints
You can control the size of a button across breakpoints by tacking any of our breakpoint suffixes to the end of the button size class.
<a class="m-b-05-xs button button--large-xs" href>Large</a>Primary (teal and blue)
Primary buttons are used to indicate a primary action on the page. Use the class, .button.button--primary-teal or .button.button--primary-blue, to get a primary button on your page. These teal and blue primary buttons meet accessibility standards, so please use them going forward. The brand green ones below are supported, but are considered deprecated since they don't meet contrast ratio standards.
<a class="m-b-05-xs button button--primary-teal button--large-xs" href>Large</a>
<a class="m-b-05-xs button button--primary-teal" href>Normal</a>
<a class="m-b-05-xs button button--primary-teal button--small-xs" href>Small</a>
<a class="m-b-05-xs button button--primary-teal button--xsmall-xs" href>X-Small</a><a class="m-b-05-xs button button--primary-blue button--large-xs" href>Large</a>
<a class="m-b-05-xs button button--primary-blue" href>Normal</a>
<a class="m-b-05-xs button button--primary-blue button--small-xs" href>Small</a>
<a class="m-b-05-xs button button--primary-blue button--xsmall-xs" href>X-Small</a>Primary Ubora
For primary CTAs in the Ubora brand.
Large Normal Small X-Small<a class="m-b-05-xs button button--primary-ubora button--large-xs" href>Large</a>
<a class="m-b-05-xs button button--primary-ubora" href>Normal</a>
<a class="m-b-05-xs button button--primary-ubora button--small-xs" href>Small</a>
<a class="m-b-05-xs button button--primary-ubora button--xsmall-xs" href>X-Small</a>Primary (green - deprecated but legacy supported)
These appear on older marketing pages; please don't use them going forward.
Large Normal Small X-Small<a class="m-b-05-xs button button--primary button--large-xs" href>Large</a>
<a class="m-b-05-xs button button--primary" href>Normal</a>
<a class="m-b-05-xs button button--primary button--small-xs" href>Small</a>
<a class="m-b-05-xs button button--primary button--xsmall-xs" href>X-Small</a>Secondary
Secondary buttons are used to indicate a secondary action on the page. To access these styles, use the class, .button.button--secondary.
<a class="m-b-05-xs button button--secondary button--large-xs" href>Large</a>
<a class="m-b-05-xs button button--secondary" href>Normal</a>
<a class="m-b-05-xs button button--secondary button--small-xs" href>Small</a>
<a class="m-b-05-xs button button--secondary button--xsmall-xs" href>X-Small</a>Alert
Alert buttons are used to indicate a urgent or negative action on the page. To access these styles, use the class, .button.button--alert.
<a class="m-b-05-xs button alert button--large-xs" href>Large</a>
<a class="m-b-05-xs button alert" href>Normal</a>
<a class="m-b-05-xs button alert button--small-xs" href>Small</a>
<a class="m-b-05-xs button alert button--xsmall-xs" href>X-Small</a>Inverse
Inverse buttons are used when the background color a container is too dark for normal buttons to have enough contrast. Invert the style with the classes, .button--inverse, .button--inverse-primary, .button--inverse-primary-teal, .button--inverse-disabled, .button--inverse-primary-disabled.
<a class="m-b-05-xs button button--inverse" href>Inverse</a>
<a class="m-b-05-xs button button--inverse-primary" href>Inverse Primary</a>
<a class="m-b-05-xs button button--inverse-primary-teal" href>Inverse Primary Teal</a>
<a class="m-b-05-xs button button--inverse-disabled" href>Inverse Disabled</a>
<a class="m-b-05-xs button button--inverse-primary-disabled" href>Inverse Primary Disabled</a>Disabled
Disabled buttons are used when the action on the page is blocked to the user. Get this button on a page by using the class, .button.button--disabled.
<a class="m-b-05-xs button button--disabled button--large-xs" href>Large</a>
<a class="m-b-05-xs button button--disabled" href>Normal</a>
<a class="m-b-05-xs button button--disabled button--small-xs" href>Small</a>
<a class="m-b-05-xs button button--disabled button--xsmall-xs" href>X-Small</a>Extra Large Buttons
These buttons should typically be reserved for marketing pages since the scale is pretty large and works better visually on marketing layouts.
Default Primary Secondary Alert Disabled<a class="m-b-05-xs button button--xlarge-xs" href>Default</a>
<a class="m-b-05-xs button button--primary button--xlarge-xs" href>Primary</a>
<a class="m-b-05-xs button button--secondary button--xlarge-xs" href>Secondary</a>
<a class="m-b-05-xs button button--alert button--xlarge-xs" href>Alert</a>
<a class="m-b-05-xs button button--disabled button--xlarge-xs" href>Disabled</a>Inline Buttons
These buttons are used when you have some inline text inputs and need a button at the end. It changes the padding and height to match the size of text inputs.
Default<a class="m-b-05-xs button button--inline" href>Default</a>Category Color Buttons
Each button supports the full array of topic colors by adding the name of the category to the class. Use classes like, button--category-fundamentals, in conjunction with any other button class combo to set it as a category color. By default, this will effect the border and text color of the button. To use the primary button style with topic colors apply the category color class in conjunction with the button--primary class.
<div class="m-b-05-xs">
<a class="m-b-05-xs button button--category-fundamentals">Fundamentals</a>
<a class="m-b-05-xs button button--category-front-end">Front End</a>
<a class="m-b-05-xs button button--category-back-end">Back End</a>
<a class="m-b-05-xs button button--category-data">Data</a>
<a class="m-b-05-xs button button--category-design">Design</a>
<a class="m-b-05-xs button button--category-mobile">Mobile</a>
<a class="m-b-05-xs button button--category-experimental">Experimental</a>
<a class="m-b-05-xs button button--category-undefined">Undefined</a>
</div>
<div>
<a class="m-b-05-xs button button--primary button--category-fundaments">Fundamentals</a>
<a class="m-b-05-xs button button--primary button--category-front-end">Front End</a>
<a class="m-b-05-xs button button--primary button--category-back-end">Back End</a>
<a class="m-b-05-xs button button--primary button--category-data">Data</a>
<a class="m-b-05-xs button button--primary button--category-design">Design</a>
<a class="m-b-05-xs button button--primary button--category-mobile">Mobile</a>
<a class="m-b-05-xs button button--primary button--category-experimental">Experimental</a>
<a class="m-b-05-xs button button--primary button--category-undefined">Undefined</a>
</div>Full Width
Make any button span the full width of its container by using the class, w-full-xs. The padding and text size will be controlled by whichever size class you add. You can control the full-width aspect of the button with breakpoint suffixes.
<a class="m-b-05-xs button w-full-xs m-b-05-xs" href>Button</a>
<a class="m-b-05-xs button w-full-xs button--primary m-b-05-xs" href>Button</a>
<a class="m-b-05-xs button w-full-xs button--secondary m-b-05-xs" href>Button</a>
<a class="m-b-05-xs button w-full-xs button--alert m-b-05-xs" href>Button</a>These buttons will only be full width on screen that are xs, md, and lg.
<a class="m-b-05-xs button w-full-xs w-auto-lg m-b-05-xs" href>Button</a>
<a class="m-b-05-xs button w-full-xs w-auto-lg button--primary m-b-05-xs" href>Button</a>
<a class="m-b-05-xs button w-full-xs w-auto-lg button--secondary m-b-05-xs" href>Button</a>
<a class="m-b-05-xs button w-full-xs w-auto-lg button--alert m-b-05-xs" href>Button</a>Pill Buttons (Tags)
Any button can become a pill button by adding the class circle alongside button classes.
<a class="m-b-05-xs button circle m-b-05-xs" href>Button</a>
<a class="m-b-05-xs button circle button--primary m-b-05-xs" href>Button</a>
<a class="m-b-05-xs button circle button--secondary m-b-05-xs" href>Button</a>
<a class="m-b-05-xs button circle button--alert m-b-05-xs" href>Button</a>Split Buttons
Split buttons are used when you need a button that contains two actions. To accomplish this, wrap your buttons in <div class="split-button">.
<div class="split-button">
<a class="m-b-05-xs button" href>Add</a>
<a class="m-b-05-xs button" href><%= icon('add') %></a>
</div>
<div class="split-button">
<a class="m-b-05-xs button button--primary" href>Add</a>
<a class="m-b-05-xs button button--primary" href>Remove</a>
</div>
<div class="split-button">
<a class="m-b-05-xs button button--secondary" href>Add</a>
<a class="m-b-05-xs button button--secondary" href>Remove</a>
</div>
<div class="split-button">
<a class="m-b-05-xs button button--alert" href>Add</a>
<a class="m-b-05-xs button button--alert" href>Remove</a>
</div>