Icon Button
<ahi-icon-button> | AhiIconButton
Icon buttons are simple, icon-only buttons that can be used for actions and in toolbars.
You should always provide an label for assistive devices.
<ahi-icon-button name="settings" label="Settings"></ahi-icon-button>
Examples
Link buttons
Use the href attribute to convert the button to a link.
<ahi-icon-button name="settings" label="Settings" href="https://example.com" target="_blank"></ahi-icon-button>
States
Disabled
Use the disabled attribute to disable the icon button.
<ahi-icon-button name="settings" label="Settings" disabled></ahi-icon-button>
With badges
Add an <ahi-badge> component in the icon button’s slot to add a badge to the icon.
<ahi-icon-button name="bell" label="Notifications">
<ahi-badge>99+</ahi-badge>
</ahi-icon-button>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/icon-button/icon-button.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/icon-button/icon-button.js';Slots
| Name | Description |
|---|---|
| (default) | Content to be displayed next to the icon. |
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
disabled
|
Disables the button. |
boolean
|
false
|
|
download
|
Tells the browser to download the linked file as this filename. Only used when href is
set.
|
string | undefined
|
- | |
href
|
When set, the underlying button will be rendered as an <a> with this
href instead of a <button>.
|
string | undefined
|
- | |
name
|
The name of the icon to draw. |
string | undefined
|
- | |
hostTabIndex
tabindex
|
Mirrors a tabindex set on the host onto the internal control.
tabindex on a custom element governs the HOST, and does nothing to the focusable
element inside its shadow root — so <ahi-icon-button tabindex="-1"> used to leave
a live tab stop behind, because the internal <button> hardcoded
tabindex="0". Where the caller had also set aria-hidden="true" (the
pointer-only scroll controls in ahi-tab-group do exactly this) the result was a
keyboard user landing on a control screen readers are told does not exist — a WCAG 4.1.2 failure,
and the shape of bug that is invisible until something audits it. Found by the axe-core gate; see
CORE-782. Declared rather than read ad hoc so Lit re-renders when it changes. Absent, the internal
control keeps tabindex="0", so nothing changes for existing callers.
|
number | null
|
null
|
|
size
|
The size of the icon. |
'minor' | 'major' | 'spot'
|
'major'
|
|
color
|
The color of the icon. Can accept any valid CSS color value, including custom properties. |
string | undefined
|
- | |
label
|
A description that gets read by assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does. |
string
|
''
|
|
target
|
Tells the browser where to open the link. Only used when href is set. |
'_blank' | '_parent' | '_self' | '_top' | undefined
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-blur |
Emitted when the icon button loses focus. | - |
ahi-focus |
Emitted when the icon button gains focus. | - |
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
click() |
Simulates a click on the icon button. | - |
focus() |
Sets focus on the icon button. |
options: FocusOptions
|
blur() |
Removes focus from the icon button. | - |
Learn more about methods.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the icon-button part instead. |
icon-button |
The component’s outer wrapper. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<ahi-icon>