Buttons on GitHub

Buttons

A button indicates a user action.

To create a button, use the <d2l-button> custom element, and treat it like a native <button> element.

Example (html)
<d2l-button>Button</d2l-button>
Button

Primary Buttons

The button for the most common user action should be made primary by setting the primary attribute.

Note

A page should only ever have ONE primary button.

Example (html)
<d2l-button primary>Yes</d2l-button>
<d2l-button>No</d2l-button>
Yes No

Disabled Buttons

To prevent a user from interacting with a button, add the standard HTML disabled attribute.

Example (html)
<d2l-button disabled>Disabled</d2l-button>
Disabled

Subtle Buttons

For buttons with advanced or de-emphasized actions, use the <d2l-button-subtle> component which contains text and an optional icon.

Example (html)
<d2l-button-subtle icon="d2l-tier1:print" text="Print"></d2l-button-subtle>

Icon Buttons

For cases when it is desired to have an icon perform a clickable action, use the <d2l-button-icon> component.

Example (html)
<d2l-button-icon icon="d2l-tier1:home" text="Home"></d2l-button-icon>
Accessibility: Always Provide Text

Always provide the text attribute for a d2l-button-icon in order to provide a textual description. It will automatically be applied to the button aria-label and to the title attribute as a tooltip.

Floating Workflow Buttons

Longer pages which have important workflow buttons (e.g. save/cancel, next/previous) may wish to have those buttons float in a fixed position at the bottom of the screen. As the buttons are scrolled into view, they will dock at the bottom edge.

To apply this behavior, surround your buttons in the <d2l-floating-buttons> web component:

Example (html)
<d2l-floating-buttons>
	<d2l-button>Save</button>
	<d2l-button>Cancel</button>
</d2l-floating-buttons>

Developing with Buttons

Installation

To use this component in your application, you can install it using Bower:

bower install d2l-button

Then import the components you need:

Example (html)
<!-- for normal and primary buttons -->
<link
  rel="import"
  href="bower_components/d2l-button/d2l-button.html">
<!-- for floating workflow buttons -->
<link
  rel="import"
  href="bower_components/d2l-button/d2l-floating-buttons.html">

Show me the code!

Want to see, contribute or learn more about the code?
Check out "BrightspaceUI/button" on GitHub!

More information on developing with Brightspace UI components can be found in the Developer Guide.