Alerts & Badges
Inline feedback and status labels.
Alerts
A primary alert with a short message.
Your changes were saved successfully.
Your trial ends in three days.
We could not process your payment method.
A new version of the API is available.
Alerts with icons & actions
Deployment succeededv2.4.1 is live in production.
Storage almost fullYou have used 94% of your plan's storage.
Upgrade
Payment failedYour card was declined by the issuer.
Dismissible alert — click the cross to remove it.
Badges
Solid
PrimarySecondarySuccess
DangerWarningInfoDark
Soft (default in this template)
PrimarySecondarySuccess
DangerWarningInfo
Outline
Primary
Success
Danger
Neutral
With a status dot
Operational
Degraded
Outage
Badges in context
On buttons
On avatars
Trend chips
12.4%
3.1%
4.2x ROAS