Buttons

On this page:

• Buttons vs links
• Basic use (Default)
• Colours/Styles
• Supertask (Call to Action)
• Sizing
• Full Width
• Active State
• Disabled State
• Button Groups (Horizontal)
• Button Groups (Vertical)
• Button Toolbar
• Input Groups
• Data-toggle Buttons
• Resource

Buttons vs links

Button

A button will perform an action on the current page without moving the focus or without navigating the user away

Link

A link will send the user at a location, in the same page via an anchor (`#`) link or to an another page without sending any data over.

Do not use the role button on an anchor, use a button element instead.

Basic use (Default)

Working example

Scaffolding (Default):

With the default style:

Code Sample

	// Default button:
	<button type="submit">
	Button
	</button>
	<input type="button" value="Input"/>
	<input type="submit" value="Submit"/>
	<a href="#">
	Link
	</a>

	// Styled button:
	<button class="btn btn-default" type="submit">
	Button
	</button>
	<input class="btn btn-default" type="button" value="Input"/>
	<input class="btn btn-default" type="submit" value="Submit"/>
	<a class="btn btn-default" href="#">
	Link
	</a>

Colours/Styles

Colours signify various things such as a link to warning information (caution styled button). The text of that styled button will also contains word describing the state like "Warning notice".

Working example

Code sample

	// Default:
	<button type="button" class="btn btn-default">
	Default
	</button>

	// Primary:
	<button type="button" class="btn btn-primary">
	Primary
	</button>

	// Success:
	<button type="button" class="btn btn-success">
	Success
	</button>

	// Info:
	<button type="button" class="btn btn-info">
	Info
	</button>

	// Warning:
	<button type="button" class="btn btn-warning">
	Warning
	</button>

	// Danger:
	<button type="button" class="btn btn-danger">
	Danger
	</button>

	// Link:
	<button type="button" class="btn btn-link">
	Link
	</button>

	//Link styled as a button
	<a class="btn btn-default" href="#">
	Link styled as a button
	</a>
	

Supertask (Call to Action)

Working example

Code sample

// Supertask (Call to Action) button:
<button type="button" class="btn btn-call-to-action">Supertask (Call to Action)</button>

Sizing

Use to increase or decrease the size of a button.

Working example

Code sample

	// Extra small button:
	<button type="button" class="btn btn-default btn-xs">
	Extra small button
	</button>

	// Small button:
	<button type="button" class="btn btn-default btn-sm">
	Small button
	</button>

	// Default button:
	<button type="button" class="btn btn-default">
	Default button
	</button>

	// Large button:
	<button type="button" class="btn btn-default btn-lg">
	Large button
	</button>

Full Width

Use to create block level buttons (those that span the full width of a parent).

Working example

Code sample

// Block level button:
<button type="button" class="btn btn-default btn-block">Button</button>

Active state

Use .active with button and a elements if you need to have a button look active at all times (usually for display or instructional purposes on fake buttons or links). When a user presses a button it appears in the active state (with an inset shadow, and darker background and border). For button and a elements, this is auto-styled in CSS via :active.

Working example

Code sample

// Active button:
<button type="button" class="btn btn-default active">Button</button>

// Active link:
<a class="btn btn-default active" href="#" role="button">
Link
</a>

Disabled state

Use to disable buttons and links (not clickable), and give them a faded appearance.

Working example

Code sample

// Disabled button:
<button type="button" class="btn btn-default disabled">Button</button>

// Disabled link:
<a class="btn btn-default disabled" href="#" role="button">
Link
</a>

Button groups (Horizontal)

Group a series of buttons together on a single line with the btn-group class.

Working Example

Default:

Large:

Small:

Extra small:

Justified (links):

Justified (buttons):

Code sample

// Default:
<div class="btn-group">
	<button type="button" class="btn btn-default">...</button>
</div>

// Large button group:
<div class="btn-group btn-group-lg">...
</div>

// Small button group:
<div class="btn-group btn-group-sm">...
</div>

// Extra small button group:
<div class="btn-group btn-group-xs">...
</div>

// Justified links:
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#" role="button">...
</a>
</div>

// Justified button group:
<div class="btn-group btn-group-justified">
<div class="btn-group">
	<button type="button" class=" btn btn-default">...
	</button>
</div>...
</div>

Button groups (Vertical)

Make a set of buttons appear vertically stacked rather than horizontally with the btn-group-vertical class.

Working Example

Code sample

// Vertical button group:
<div class="btn-group-vertical">
	<button type="button" class="btn btn-default">
	Top
	</button>
	<button type="button" class="btn btn-default">
	Middle
	</button>
	<button type="button" class="btn btn-default">
	Bottom
	</button>
</div>

Button toolbar

Use to display multiple groups of buttons together on a single line with the btn-toolbar class. Note the use of this feature requires some additional requirements in order to comform to WCAG.

Working Example

Code sample

// Button toolbar:
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
	<div class="btn-group" role="group" aria-label="First group">
		<button type="button" class="btn btn-default">
		1
		</button>
		<button type="button" class="btn btn-default">
		2
		</button>
		<button type="button" class="btn btn-default">
		3
		</button>
		<button type="button" class="btn btn-default">
		4
		</button>
	</div>

	<div class="btn-group" role="group" aria-label="Second group">
		<button type="button" class="btn btn-default">
		5
		</button>
		<button type="button" class="btn btn-default">
		6
		</button>
		<button type="button" class="btn btn-default">
		7
		</button>
	</div>

	<div class="btn-group" role="group" aria-label="Third group">
		<button type="button" class="btn btn-default">
		8
		</button>
	</div>
</div>

Input Groups

Easily extend form controls by adding buttons, or button groups on either side of textual inputs with the input-group and input-group-btn classes.

Working Example

Code Sample

// Input groups:
<div class="input-group">
	<span class="input-group-btn">
		<button class="btn btn-default" type="button">Button</button>
	</span>
	<input type="text" class="form-control">
</div>

<div class="input-group">
	<input type="text" class="form-control">
	<span class="input-group-btn">
		<button class="btn btn-default" type="button">Button</button>
	</span>
</div>

Data-toggle buttons

Bootstrap’s .button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the inputs within your buttons. More info can be found here: Bootstrap components

We are currently working on adding similiar functionality in the future. More info can be found in this pull request on GitHub.

Resource

Design system guidance on buttons