You can create a button using minimal markup.
<!-- Default Button -->
<button>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" 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">Default Button</button>
<span class="show-for-lv">
<button class="button secondary">Secondary Button</button>
</span>
<button class="button tertiary">Tertiary Button</button>
<button class="button dull">Dull Button</button>
Other classes denote a button's context.
<!-- Contextual Color Classes -->
<button class="button success">Success Button</button>
<button class="button alert">Alert Button</button>
<button class="button warning">Warning Button</button>
<button class="button 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 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 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 disabled">Disabled Button</button>
<!-- Disable via Attribute -->
<button class="button" disabled>Disabled Button</button>
The disabled state applies to all color variants discussed above.
<!-- Disabled Emphasis Buttons -->
<div>
<button class="button" disabled>Default Button</button>
<span class="show-for-lv">
<button class="button secondary" disabled>Secondary Button</button>
</span>
<button class="button tertiary" disabled>Tertiary Button</button>
<button class="button dull" disabled>Dull Button</button>
</div>
<!-- Disabled Contextual Buttons -->
<div>
<button class="button success" disabled>Success Button</button>
<button class="button alert" disabled>Alert Button</button>
<button class="button warning" disabled>Warning Button</button>
<button class="button info" disabled>Info Button</button>
</div>
To render a button with an active state, simply add a .active class.
<div>
<button>Default Button</button>
<button class="active">Active Button</button>
</div>
<span class="show-for-lv">
<div>
<button class="secondary">Secondary Button</button>
<button class="secondary active">Active Button</button>
</div>
</span>
<div>
<button class="tertiary">Tertiary Button</button>
<button class="tertiary active">Active Button</button>
</div>
<div>
<button class="dull">Dull Button</button>
<button class="dull active">Active Button</button>
</div>
<div>
<button class="success">Success Button</button>
<button class="success active">Success Button</button>
</div>
<div>
<button class="warning">Warning Button</button>
<button class="warning active">Warning Button</button>
</div>
<div>
<button class="alert">Alert Button</button>
<button class="alert active">Alert Button</button>
</div>
<div>
<button class="info">Info Button</button>
<button class="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 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 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.