A Button is used to communicate and perform an action.
<script type="module">
import '@brightspace-ui/core/components/button/button.js';
import '@brightspace-ui/core/components/button/button-subtle.js';
import '@brightspace-ui/core/components/button/button-icon.js';
</script>
<d2l-button>Button</d2l-button>
<d2l-button primary>Primary Button</d2l-button>
<d2l-button-subtle text="Subtle Button" icon="tier1:gear"></d2l-button-subtle>
<d2l-button-icon text="Icon Button" icon="tier1:gear"></d2l-button-icon>- Use buttons to cause an action or launch a workflow
- Keep button text short - see "Writing" guidelines
- Don't use multiple Primary buttons - the primary action should always be clear and obvious
- Avoid icon-only buttons with unfamiliar icons, only use these for familiar concepts
- Don't use buttons for navigation, use a link instead
- Don't open menus with buttons - use a dropdown instead
The d2l-button element can be used just like the native button element, but also supports the primary attribute for denoting the primary button.
<script type="module">
import '@brightspace-ui/core/components/button/button.js';
</script>
<d2l-button>My Button</d2l-button>| Property | Type | Description |
|---|---|---|
description |
String | A description to be added to the button for accessibility for additional context |
disabled |
Boolean | Disables the button |
disabledTooltip |
String | Tooltip text when disabled |
primary |
Boolean | Styles the button as a primary button |
To make your d2l-button accessible, use the following properties when applicable:
| Attribute | Description |
|---|---|
aria-expanded |
Indicate expansion state of a collapsible element. Example: d2l-more-less. |
aria-haspopup |
Indicate clicking the button opens a menu. Example: d2l-dropdown. |
description |
Use when text on button does not provide enough context. |
The d2l-button-subtle element can be used just like the native button, but for advanced or de-emphasized actions.
Note: It is strongly recommended to use text and icon as opposed to putting content in the slot to ensure that the recommended subtle button style is maintained.
<script type="module">
import '@brightspace-ui/core/components/button/button-subtle.js';
</script>
<d2l-button-subtle text="My Button" icon="tier1:gear"></d2l-button-subtle>| Property | Type | Description |
|---|---|---|
text |
String, required | Text for the button |
description |
String | A description to be added to the button for accessibility for additional context |
disabled |
Boolean | Disables the button |
disabledTooltip |
String | Tooltip text when disabled |
h-align |
String | Possible values are undefined (default) or text. If text, aligns the button content to the leading edge of text. |
icon |
String | Preset icon key (e.g. tier1:gear) |
icon-right |
Boolean | Render the icon on the right of the button |
To make your d2l-button-subtle accessible, use the following properties when applicable:
| Attribute | Description |
|---|---|
aria-expanded |
Indicate expansion state of a collapsible element. Example: d2l-more-less. |
aria-haspopup |
Indicate clicking the button opens a menu. Example: d2l-dropdown. |
description |
Use when text on button does not provide enough context. |
<script type="module">
import '@brightspace-ui/core/components/button/button-subtle.js';
import '@brightspace-ui/core/components/icons/icon-custom.js';
</script>
<d2l-button-subtle text="Subtle Button">
<d2l-icon-custom slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
<path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
<path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
</svg>
</d2l-icon-custom>
</d2l-button-subtle>The d2l-button-icon element can be used just like the native button, for instances where only an icon is displayed.
<script type="module">
import '@brightspace-ui/core/components/button/button-icon.js';
</script>
<d2l-button-icon text="My Button" icon="tier1:gear"></d2l-button-icon>| Property | Type | Description |
|---|---|---|
description |
String | A description to be added to the button for accessibility for additional context |
icon |
String, required | Preset icon key (e.g. tier1:gear) |
text |
String, required | Accessible text for the buton |
disabled |
Boolean | Disables the button |
disabledTooltip |
String | Tooltip text when disabled |
h-align |
String | Possible values are undefined (default) or text. If text, aligns the button content to the leading edge of text. |
translucent |
Boolean | Indicates to display translucent (ex. on rich backgrounds) |
To make your d2l-button-icon accessible, use the following properties when applicable:
| Attribute | Description |
|---|---|
text |
REQUIRED. Acts as a primary label and tooltip. |
aria-expanded |
Indicate expansion state of a collapsible element. Example: d2l-more-less. |
aria-haspopup |
Indicate clicking the button opens a menu. Example: d2l-dropdown. |
aria-label |
Acts as a primary label. If text AND aria-label are provided, aria-label is used as the primary label, text is used as the tooltip. |
description |
Use when text on button does not provide enough context. |
<script type="module">
import '@brightspace-ui/core/components/button/button-icon.js';
import '@brightspace-ui/core/components/icons/icon-custom.js';
</script>
<d2l-button-icon text="Custom Icon Button">
<d2l-icon-custom slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
<path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
<path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
</svg>
</d2l-icon-custom>
</d2l-button-icon>The d2l-button-add element is for quickly adding new items inline (for example in a list).
<script type="module">
import '@brightspace-ui/core/components/button/button-add.js';
</script>
<d2l-button-add text="Add New Item"></d2l-button-add>| Property | Type | Description |
|---|---|---|
text |
String, required | The text associated with the button. When mode is "icon-and-text", this text is displayed next to the icon. Otherwise this text is in a tooltip. |
mode |
String | Display mode of the component. Defaults to "icon" (plus icon is always visible). Other options are "icon-and-text" (plus icon and text are always visible), and "icon-when-interacted" (plus icon is only visible when hover or focus). |
See floating buttons.
<d2l-button-preset type="save">for common button types that will have built-in language support
Looking for an enhancement not listed here? Create a GitHub issue!