BwIconButton | bw-icon-button

Overview

The icon button is a smaller version of the button component, meant for displaying icons. It defaults to a gray link button.

Usage

Colors and Variants

<bw-icon-button fill icon="lock_open_circle" color="blue" variant="primary"></bw-icon-button>
<bw-icon-button fill icon="lock_open_circle" color="blue" variant="secondary"></bw-icon-button>
<bw-icon-button fill icon="lock_open_circle" color="blue" variant="tertiary"></bw-icon-button>
<bw-icon-button fill icon="lock_open_circle" color="blue" variant="link"></bw-icon-button>

<bw-icon-button fill icon="lock_open_circle" color="gray" variant="primary"></bw-icon-button>
<bw-icon-button fill icon="lock_open_circle" color="gray" variant="secondary"></bw-icon-button>
<bw-icon-button fill icon="lock_open_circle" color="gray" variant="tertiary"></bw-icon-button>
<bw-icon-button fill icon="lock_open_circle" color="gray" variant="link"></bw-icon-button>

<bw-icon-button fill icon="lock_open_circle" color="red" variant="primary"></bw-icon-button>
<bw-icon-button fill icon="lock_open_circle" color="red" variant="secondary"></bw-icon-button>
<bw-icon-button fill icon="lock_open_circle" color="red" variant="tertiary"></bw-icon-button>
<bw-icon-button fill icon="lock_open_circle" color="red" variant="link"></bw-icon-button>

Disabled

<bw-icon-button icon="home" disabled></bw-icon-button>

Sizes

<bw-icon-button size="lg" icon="sentiment_satisfied" color="blue" variant="primary"></bw-icon-button>
<bw-icon-button size="md" icon="sentiment_satisfied" color="blue" variant="primary"></bw-icon-button>
<bw-icon-button size="sm" icon="sentiment_satisfied" color="blue" variant="primary"></bw-icon-button>
<bw-icon-button size="xs" icon="sentiment_satisfied" color="blue" variant="primary"></bw-icon-button>

Icons

<bw-icon-button color="blue" icon='add'></bw-icon-button>
<bw-icon-button icon='settings'></bw-icon-button>
<bw-icon-button color="red" size="lg" variant="secondary" icon='delete'></bw-icon-button>

Properties

Property	Attribute	Description	Type	Default
color	color	Color of the button	"blue" | "gray" | "red"	'gray'
disabled	disabled	Disables button	boolean	false
fill	fill	Icon fill	boolean	undefined
icon	icon	Google material icon name	string	undefined
size	size	Button size	"2xs" | "lg" | "md" | "sm" | "xs"	'md'
variant	variant	Button fill	"link" | "primary" | "secondary" | "tertiary"	'link'

Shadow Parts

Part	Description
"icon"	The icon element
"inner-button"	The native button element
"outer-button"	The bw button element

Dependencies

Used by

• bw-badge
• bw-datepicker
• bw-details
• bw-dialog
• bw-file-uploader
• bw-input
• bw-reorder-item
• bw-toast

Depends on

• bw-button
• bw-icon

Graph

---

© 2025 United Systems & Software - All Rights Reserved.