The icon button component is used to provide a visual representation of an action. The button should have a clear and descriptive label that communicates its purpose, such as "Delete" or "Add". The icon should be easily recognizable and match the label's meaning.
Action
code
<section bp-layout="inline gap:md block:center">
<bp-button-icon shape="menu" aria-label="default"></bp-button-icon>
<bp-button-icon action="secondary" shape="menu" aria-label="secondary"></bp-button-icon>
<bp-button-icon action="flat" shape="menu" aria-label="flat"></bp-button-icon>
<bp-button-icon action="inline" shape="menu" aria-label="inline"></bp-button-icon>
</section>
Status
code
<script type="module">
import '@blueprintui/components/include/button-icon.js';
import '@blueprintui/icons/shapes/filter.js';
import '@blueprintui/icons/shapes/close.js';
import '@blueprintui/icons/shapes/menu.js';
</script>
<div bp-layout="inline gap:md">
<bp-button-icon aria-label="action"></bp-button-icon>
<bp-button-icon status="accent" aria-label="action"></bp-button-icon>
<bp-button-icon status="success" aria-label="action"></bp-button-icon>
<bp-button-icon status="warning" aria-label="action"></bp-button-icon>
<bp-button-icon status="danger" aria-label="action"></bp-button-icon>
</div>
Flat
code
<script type="module">
import '@blueprintui/components/include/button-icon.js';
import '@blueprintui/icons/shapes/filter.js';
import '@blueprintui/icons/shapes/close.js';
import '@blueprintui/icons/shapes/menu.js';
</script>
<div bp-layout="inline gap:md block:center">
<bp-button-icon action="flat" shape="menu" aria-label="open menu"></bp-button-icon>
<bp-button-icon action="flat" shape="filter" aria-label="filter column"></bp-button-icon>
<bp-button-icon action="flat" shape="close" aria-label="close message"></bp-button-icon>
<bp-button-icon action="flat" aria-label="action"></bp-button-icon>
</div>
Inline
code
<script type="module">
import '@blueprintui/components/include/button-icon.js';
import '@blueprintui/icons/shapes/filter.js';
import '@blueprintui/icons/shapes/close.js';
import '@blueprintui/icons/shapes/menu.js';
</script>
<div bp-layout="inline gap:md block:center">
<bp-button-icon action="inline" shape="menu" aria-label="open menu"></bp-button-icon>
<bp-button-icon action="inline" shape="filter" aria-label="filter column"></bp-button-icon>
<bp-button-icon action="inline" shape="close" aria-label="close message"></bp-button-icon>
<bp-button-icon action="inline" aria-label="action"></bp-button-icon>
</div>
Selected
code
<script type="module">
import '@blueprintui/components/include/button-icon.js';
</script>
<div bp-layout="inline gap:md block:center">
<bp-button-icon selected aria-label="selected"></bp-button-icon>
<bp-button-icon selected action="secondary" aria-label="secondary selected"></bp-button-icon>
<bp-button-icon selected action="flat" aria-label="flat selected"></bp-button-icon>
<bp-button-icon selected action="inline" aria-label="inline selected"></bp-button-icon>
</div>
Pressed
code
<script type="module">
import '@blueprintui/components/include/button-icon.js';
</script>
<div bp-layout="inline gap:md block:center">
<bp-button-icon pressed aria-label="pressed"></bp-button-icon>
<bp-button-icon pressed action="secondary" aria-label="secondary pressed"></bp-button-icon>
<bp-button-icon pressed action="flat" aria-label="flat pressed"></bp-button-icon>
<bp-button-icon pressed action="inline" aria-label="inline pressed"></bp-button-icon>
</div>
The pressed attribute should be used for interactive UI elements that can be toggled on and off. It provides accessibility information to screen reader users about the state of the control, whether it's "true" (pressed), "false" (not pressed), or "mixed".
Disabled
code
<script type="module">
import '@blueprintui/components/include/button-icon.js';
</script>
<div bp-layout="inline gap:md block:center">
<bp-button-icon disabled aria-label="action"></bp-button-icon>
<bp-button-icon disabled action="secondary" aria-label="action"></bp-button-icon>
<bp-button-icon disabled action="flat" aria-label="action"></bp-button-icon>
<bp-button-icon disabled action="inline" aria-label="action"></bp-button-icon>
</div>
The disabled attribute should be used for UI elements that are currently disabled, making them uninteractive. This attribute informs assistive technologies like screen readers that the element, while present in the document structure, is not usable or cannot be interacted with in its current state.
Install
NPM
import '@blueprintui/components/include/button-icon.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/button-icon.js/+esm';
</script>
Accessibility
- Use clear, descriptive labels for the button that communicates its purpose.
- Use aria-label or aria-labelledby to provide a text description of the icon for screen readers.
- Make sure that the icon alone still conveys its meaning when used out of context.
- Provide alternative ways for users who have difficulty seeing the icon to understand the button's function, such as by including a text label.
Properties
| Name | Types | Description |
|---|
shape | string | |
direction | 'up' | 'down' | 'left' | 'right' | |
i18n | | set default aria/i18n strings |
icon | | |
action | 'primary' | 'secondary' | 'flat' | 'inline' | |
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
pressed | boolean | turns the button into a toggle button |
selected | boolean | indicate the current "selected" state of various widgets |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current |
value | string | determines the current value |
popoverTargetElement | HTMLElement | |
popoverTargetAction | | 'toggle' | 'show' | 'hide' | |
popovertarget | string | |
form | HTMLFormElement | |
formAction | string | |
formEnctype | string | |
formMethod | string | |
formNoValidate | boolean | |
formTarget | string | |
labels | NodeListOf | |
validationMessage | string | |
validity | ValidityState | |
willValidate | boolean | |
checkValidity | any | |
reportValidity | any | |
setCustomValidity | any | |
formAssociated | boolean | |
Attributes
| Name | Types | Description |
|---|
shape | string | |
direction | 'up' | 'down' | 'left' | 'right' | |
i18n | | set default aria/i18n strings |
action | 'primary' | 'secondary' | 'flat' | 'inline' | |
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
pressed | boolean | turns the button into a toggle button |
selected | boolean | indicate the current "selected" state of various widgets |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
value | string | determines the current value |
popoverTargetElement | HTMLElement | |
popovertargetaction | | 'toggle' | 'show' | 'hide' | |
popovertarget | string | |
CSS Properties
| Name | Types | Description |
|---|
--width | | |
--height | | |
--color | | |
--cursor | | |
--background | | |
--padding | | |
--outline | | |
--outline-offset | | |
--border | | |
--min-width | | |
--font-size | | |
--line-height | | |
--text-align | | |
Slots
| Name | Types | Description |
|---|
default | | slot for text content or bp-icon |