Documentation Playground
Skip to content
Docs

Badge

Stylized badge element.
In progress In review Complete 
<.flex gap="2">
  <.badge color="orange">In progress</.badge>
  <.badge color="blue">In review</.badge>
  <.badge color="green">Complete</.badge>
</.flex>

API Reference

This component is based on the span element and supports common margin props.

Prop Type Default Description
as_child boolean false Composes the component into its immediate child instead of rendering its own HTML element.
class string nil Additional CSS classes
color string — Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
high_contrast boolean — Whether to increase color contrast with the background.
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
radius string — Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
size string "1" Badge size
style string nil Additional inline styles
variant string "soft" Badge variant
as_child Composes the component into its immediate child instead of rendering its own HTML element.
Type boolean Default false
class Additional CSS classes
Type string Default nil
color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type string Default —
high_contrast Whether to increase color contrast with the background.
Type boolean Default —
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
radius Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
Type string Default —
size Badge size
Type string Default "1"
style Additional inline styles
Type string Default nil
variant Badge variant
Type string Default "soft"

Examples

Size

Use the size prop to control the size.

New New New 
<.flex align="center" gap="2">
  <.badge size="1" color="indigo">New</.badge>
  <.badge size="2" color="indigo">New</.badge>
  <.badge size="3" color="indigo">New</.badge>
</.flex>

Variant

Use the variant prop to control the visual style.

New New New New 
<.flex gap="2">
  <.badge variant="solid" color="indigo">New</.badge>
  <.badge variant="soft" color="indigo">New</.badge>
  <.badge variant="surface" color="indigo">New</.badge>
  <.badge variant="outline" color="indigo">New</.badge>
</.flex>

Color

Use the color prop to assign a specific accent color.

New New New New 
<.flex gap="2">
  <.badge color="indigo">New</.badge>
  <.badge color="cyan">New</.badge>
  <.badge color="orange">New</.badge>
  <.badge color="crimson">New</.badge>
</.flex>

High-contrast

Use the high_contrast prop to increase color contrast with the background.

New New New New
New New New New 
<.flex direction="column" gap="2">
  <.flex gap="2">
    <.badge color="gray" variant="solid">New</.badge>
    <.badge color="gray" variant="soft">New</.badge>
    <.badge color="gray" variant="surface">New</.badge>
    <.badge color="gray" variant="outline">New</.badge>
  </.flex>
  <.flex gap="2">
    <.badge color="gray" variant="solid" high_contrast>New</.badge>
    <.badge color="gray" variant="soft" high_contrast>New</.badge>
    <.badge color="gray" variant="surface" high_contrast>New</.badge>
    <.badge color="gray" variant="outline" high_contrast>New</.badge>
  </.flex>
</.flex>

Radius

Use the radius prop to assign a specific radius value.

New New New 
<.flex gap="2">
  <.badge variant="solid" radius="none" color="indigo">New</.badge>
  <.badge variant="solid" radius="large" color="indigo">New</.badge>
  <.badge variant="solid" radius="full" color="indigo">New</.badge>
</.flex>
← Avatar Button →