The default form of solid color avatars.

Dark alert! You should check in on some of those fields below.

Secondary alert! You should check in on some of those fields below.

Info alert! You should check in on some of those fields below.

Success alert! You should check in on some of those fields below.

Danger alert! You should check in on some of those fields below.

Warning alert! You should check in on some of those fields below.

 Show code

HTML

Copy

Soft color variants

The default form of soft color avatars.

Secondary alert! You should check in on some of those fields below.

Secondary alert! You should check in on some of those fields below.

Info alert! You should check in on some of those fields below.

Success alert! You should check in on some of those fields below.

Danger alert! You should check in on some of those fields below.

Warning alert! You should check in on some of those fields below.

 Show code

HTML

Copy

Bordered styles

Use a discovery message to signify an update to the UI or provide information around new features and onboarding.

Successfully updated.

You have successfully updated your email preferences.

Error!

Your purchase has been declined.

 Show code

HTML

Copy

Actions

More actionable alert example.

YouTube would like you to send notifications

Notifications may include alerts, sounds and icon badges. These can be configured in Settings.

Don't allow Allow

 Show code

HTML

Copy