Button Icon

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.

Example

<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="open options"></bp-button-icon>
  <bp-button-icon shape="menu" aria-label="open menu"></bp-button-icon>
  <bp-button-icon shape="filter" aria-label="filter column"></bp-button-icon>
  <bp-button-icon shape="close" aria-label="close message"></bp-button-icon>
</div>

Selected

<script type="module">
  import '@blueprintui/components/include/button-icon.js';
</script>
<bp-button-icon selected aria-label="open options"></bp-button-icon>

Disabled

<script type="module">
  import '@blueprintui/components/include/button-icon.js';
</script>
<bp-button-icon disabled aria-label="open options"></bp-button-icon>

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

Attributes

CSS Properties

Slots