Button Icon

The icon button component is used to provide a visual representation of an action.

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

// npm package
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.

bp-button-icon

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 element as a string.
`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