Callouts & status
Callouts draw attention to important information; badges and tags label and count. Every example shows the exact markawesome markdown on the left and the live Web Awesome component on the right.
Callout
Type: info
The :::info type is an alias for :::brand.
:::info
The **info** type, with a [link](https://webawesome.com).
:::
The info type, with a link.
Type: brand
:::brand
The **brand** type, with a [link](https://webawesome.com).
:::
The brand type, with a link.
Type: success
:::success
The **success** type, with a [link](https://webawesome.com).
:::
The success type, with a link.
Type: warning
:::warning
The **warning** type, with a [link](https://webawesome.com).
:::
The warning type, with a link.
Type: danger
:::danger
The **danger** type, with a [link](https://webawesome.com).
:::
The danger type, with a link.
Type: neutral
:::neutral
The **neutral** type, with a [link](https://webawesome.com).
:::
The neutral type, with a link.
Size: xs
:::info xs
The `xs` size drives padding and type scale.
:::
The xs size drives padding and type scale.
Size: s
:::info s
The `s` size drives padding and type scale.
:::
The s size drives padding and type scale.
Size: m
:::info m
The `m` size drives padding and type scale.
:::
The m size drives padding and type scale.
Size: l
:::info l
The `l` size drives padding and type scale.
:::
The l size drives padding and type scale.
Size: xl
:::info xl
The `xl` size drives padding and type scale.
:::
The xl size drives padding and type scale.
Appearance: accent
:::brand accent
Appearance `accent`.
:::
Appearance accent.
Appearance: filled
:::brand filled
Appearance `filled`.
:::
Appearance filled.
Appearance: outlined
:::brand outlined
Appearance `outlined`.
:::
Appearance outlined.
Appearance: plain
:::brand plain
Appearance `plain`.
:::
Appearance plain.
Appearance: filled-outlined
:::brand filled-outlined
Appearance `filled-outlined`.
:::
Appearance filled-outlined.
Animated icon: shake
Append an animation token (shake, spin, beat, bounce, …) to animate the icon — no Pro kit needed.
:::warning shake
This warning's icon animates on a loop.
:::
This warning’s icon animates on a loop.
Animated icon: spin
:::danger spin
Something is in progress.
:::
Something is in progress.
Custom icon
:::info icon:rocket
Override the default icon with `icon:name`.
:::
Override the default icon with icon:name.
Badge
Variant: brand
!!!brand
Brand
!!!
Variant: success
!!!success
Success
!!!
Variant: neutral
!!!neutral
Neutral
!!!
Variant: warning
!!!warning
Warning
!!!
Variant: danger
!!!danger
Danger
!!!
Appearance: accent
!!!brand accent
accent
!!!
Appearance: filled
!!!brand filled
filled
!!!
Appearance: outlined
!!!brand outlined
outlined
!!!
Appearance: filled-outlined
!!!brand filled-outlined
filled-outlined
!!!
Attention: pulse
The pulse and bounce attention flags animate the badge to draw the eye.
!!!danger pulse
9
!!!
Attention: bounce
!!!success bounce
New
!!!
Pill
!!!brand pill
Pill
!!!
Tag
Variant: brand
@@@brand
brand
@@@
Variant: success
@@@success
success
@@@
Variant: neutral
@@@neutral
neutral
@@@
Variant: warning
@@@warning
warning
@@@
Variant: danger
@@@danger
danger
@@@
Appearance: accent
@@@success accent
accent
@@@
Appearance: filled
@@@success filled
filled
@@@
Appearance: outlined
@@@success outlined
outlined
@@@
Appearance: filled-outlined
@@@success filled-outlined
filled-outlined
@@@
Size: xs
@@@neutral xs
xs
@@@
Size: s
@@@neutral s
s
@@@
Size: m
@@@neutral m
m
@@@
Size: l
@@@neutral l
l
@@@
Size: xl
@@@neutral xl
xl
@@@
Pill
@@@brand pill
Pill tag
@@@
With remove button
@@@warning with-remove
Dismissible
@@@
With icon
@@@success icon:check
Approved
@@@