You can create a button using minimal markup.
NOTE: NM should use both .button and .btn-cta classes when adding new buttons to get the most recent design styles. Legacy styles are still available by using just the .button class. LV can leave out the btn-cta since those styles are not currently available for LV.
<!-- Default Button -->
<button class="button btn-cta">Default Button</button>
Note that button styles are attached either to elements with the <button> or
to elements containing the .button class, and as such, these styles can be
applied to any element.
It is recommended that these styles are only applied to elements with the
<button> or <a> tags.
<!-- Using an anchor tag -->
<a href="#" class="button btn-cta" id="button-primary">Default Button</a>
Please use the <a> tag if the button is to act like
a link, and the <button> tag otherwise.
Additional classes can be added to your button to change its color.
Some of these classes denote a button's emphasis.
<!-- Emphasis Color Classes -->
<button class="button btn-cta">Default Button</button>
<span class="show-for-lv">
<button class="button btn-cta secondary">Secondary Button</button>
</span>
<button class="button btn-cta tertiary">Tertiary Button</button>
<button class="button btn-cta dull">Dull Button</button>
Other classes denote a button's context.
<!-- Contextual Color Classes -->
<button class="button btn-cta success">Success Button</button>
<button class="button btn-cta alert">Alert Button</button>
<button class="button btn-cta warning">Warning Button</button>
<button class="button btn-cta info">Info Button</button>
We have also provided for you a default inverse button to be used on dark backgrounds.
<div class="bg-inverse padding-medium">
<button class="button btn-cta inverse">Inverse Button</button>
</div>
By default, buttons display as inline-block and only take up the room
needed by the text they contain. To establish a new block context and expand
the button to the size of its container, use the .expand class.
<!-- Block-level Modifier Classes -->
<button class="button btn-cta expand">Expanded Button</button>
To render a button with a disabled state, simply add a .disabled class
or a [disabled] attribute.
<!-- Disable via Class -->
<button class="button btn-cta disabled">Disabled Button</button>
<!-- Disable via Attribute -->
<button class="button btn-cta" disabled>Disabled Button</button>
The disabled state applies to all color variants discussed above.
<!-- Disabled Emphasis Buttons -->
<div>
<button class="button btn-cta" disabled>Default Button</button>
<span class="show-for-lv">
<button class="button btn-cta secondary" disabled>Secondary Button</button>
</span>
<button class="button btn-cta tertiary" disabled>Tertiary Button</button>
<button class="button btn-cta dull" disabled>Dull Button</button>
</div>
<!-- Disabled Contextual Buttons -->
<div>
<button class="button btn-cta success" disabled>Success Button</button>
<button class="button btn-cta alert" disabled>Alert Button</button>
<button class="button btn-cta warning" disabled>Warning Button</button>
<button class="button btn-cta info" disabled>Info Button</button>
</div>
To render a button with an active state, simply add a .active class.
<div>
<button class="button btn-cta">Default Button</button>
<button class="active btn-cta">Active Button</button>
</div>
<span class="show-for-lv">
<div>
<button class="secondary btn-cta">Secondary Button</button>
<button class="secondary btn-cta active">Active Button</button>
</div>
</span>
<div>
<button class="tertiary btn-cta">Tertiary Button</button>
<button class="tertiary btn-cta active">Active Button</button>
</div>
<div>
<button class="button btn-cta dull">Dull Button</button>
<button class="button btn-cta dull active">Active Button</button>
</div>
<div>
<button class="button btn-cta success">Success Button</button>
<button class="button btn-cta success active">Success Button</button>
</div>
<div>
<button class="button btn-cta warning">Warning Button</button>
<button class="button btn-cta warning active">Warning Button</button>
</div>
<div>
<button class="button btn-cta alert">Alert Button</button>
<button class="button btn-cta alert active">Alert Button</button>
</div>
<div>
<button class="button btn-cta info">Info Button</button>
<button class="button btn-cta info active">Info Button</button>
</div>
The dropdown button component comes with built-in open/close functionality to apply desired transitions. This functionality can be harnessed by adding/removing the .is-open class to the .uitk-dropdown element with application-specific Javascript.
Addditionally, an .active class is available for when a user selects from the drowndown-pane list.
<!-- Example -->
<div class="uitk-dropdown">
<button class="button btn-cta dropdown">Dropdown Button</button>
<ul class="dropdown-pane">
<li>Option 1</li>
<li class="active">Option 2</li>
<li>Option 3</li>
</ul>
</div>
You may expand the dropdown button by adding the .expand class to the uitk-dropdown element.
<!-- Expanded Dropdown Button -->
<div class="uitk-dropdown expand">
<button class="button btn-cta dropdown">Dropdown Button Expanded</button>
<ul class="dropdown-pane">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Buttons
Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.
Please note that the selection of button styles as provided by this style-guide is somewhat limited, as motivated by a desire for consistency over customizability.