Badge
<ahi-badge> | AhiBadge
Badges are used to inform users of the status of an object or of an action that’s been taken.
The default badge is used to give a non-critical status update on a piece of information or action.
<ahi-badge>Default badge</ahi-badge>
Examples
Informational
Use to call out an object or action as having an important attribute.
<ahi-badge status="info">Info badge</ahi-badge>
Success
Use to indicate a successful, completed, or desirable state when it’s important to provide positive reinforcement to users.
<ahi-badge status="success">Success badge</ahi-badge>
Attention
Use when something requires users’ attention but the issue isn’t critical.
<ahi-badge status="attention">Attention badge</ahi-badge>
Warning
Use for critical and time-sensitive issues that require users’ attention and potential action. Warning events are often reversible.
<ahi-badge status="warning">Warning badge</ahi-badge>
Critical
Use for critical and irreversible issues that require users’ attention and potential action.
<ahi-badge status="critical">Critical badge</ahi-badge>
Progress
Incomplete
Use to indicate when a given task has not yet been completed.
<ahi-badge progress="incomplete" status="warning">Incomplete badge</ahi-badge>
Partially complete
Use to indicate when a given task has been partially completed.
<ahi-badge progress="partially-complete" status="attention"> Partially complete badge </ahi-badge>
Complete
Use to indicate when a given task has been completed.
<ahi-badge progress="complete">Complete badge</ahi-badge>
Sizes
Use the size attribute to change a badge’s size.
<ahi-badge size="small">Small badge</ahi-badge>
<ahi-badge size="large">Large badge</ahi-badge>
With menu items
When including badges in menu items, use the suffix slot to make sure they’re aligned
correctly.
<ahi-menu style="max-width: 240px;">
<ahi-menu-label>Messages</ahi-menu-label>
<ahi-menu-item>Comments <ahi-badge slot="suffix">4</ahi-badge></ahi-menu-item>
<ahi-menu-item>Replies <ahi-badge slot="suffix">12</ahi-badge></ahi-menu-item>
</ahi-menu>
With icon buttons
Include the badge component in the icon button’s slot to add a badge to the icon.
<ahi-icon-button name="bell" label="99+ unread 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/badge/badge.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/badge/badge.js';Slots
| Name | Description |
|---|---|
| (default) | The badge’s content. |
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
progress
|
Render a pip showing the progress of a given task. |
'incomplete' | 'partially-complete' | 'complete' | undefined
|
- | |
size
|
The badge’s size. |
'small' | 'large'
|
'small'
|
|
status
|
Colors and label’s the badge with the given status. |
'new' | 'info' | 'success' | 'attention' | 'warning' | 'critical'
|
'new'
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the badge part instead. |
badge |
The component’s outer wrapper. |
pip |
The progress indicator. |
Learn more about customizing CSS parts.