Powered by

#Alert

Alert components help to highlight important messages for the reader.

To create an alert, just surround a block of text or any markdown content with !!!.

!!!
This is an alert.
!!!

#Title

Alerts can also have titles. Add a space, then add your title, such as !!! My title.

!!! My title
This is an alert.
!!!

Some basic Markdown syntax and emoji :shortcodes: are supported in the titles.

!!! :zap: [Getting Started](/guides/getting-started.md) :zap:
Get up to speed with Retype quickly by checking out the Getting Started guide.
!!!

#Variant

Alerts come in nine different flavors which can be specified by passing a variant immediately after the !!!, such as !!!danger.

VariantColor
primary (default)blue
secondarygray
successgreen
dangerred
warningyellow
infolight-blue
lightlight
darkdark
ghostlight or dark depending on time of day
contrastdark or light depending on time of day

#Samples

!!!primary Primary
This is a `primary` alert.
!!!

!!!secondary Secondary
This is a `secondary` alert.
!!!

!!!success Success
This is a `success` alert.
!!!

!!!danger Danger
This is a `danger` alert.
!!!

!!!warning Warning
This is a `warning` alert.
!!!

!!!info Info
This is a `info` alert.
!!!

!!!light Light
This is a `light` alert.
!!!

!!!dark Dark
This is a `dark` alert.
!!!

!!!ghost Ghost
This is a `ghost` alert.
!!!

!!!contrast Contrast
This is a `contrast` alert.
!!!
component