Badge generates a small badge to the top-right of its child(ren).
Below you can view various demos with example markup.
The badge component supports dot and standard styling.
<.badge
color="blue"
content="99+"
wrapper={[extend_class: "mx-4"]}
>
<.heroicon color="slate" name="mail"/>
</.badge>
<.badge
color="blue"
content="99+"
variant="dot"
wrapper={[extend_class: "mx-4"]}
>
<.heroicon color="slate" name="mail"/>
</.badge>
You can use the color attribute to define a color from theme palette.
<.badge
color="red"
content="99+"
wrapper={[extend_class: "mx-4"]}
>
<.heroicon color="slate" name="mail"/>
</.badge>
<.badge
color="orange"
content="99+"
wrapper={[extend_class: "mx-4"]}
>
<.heroicon color="slate" name="mail"/>
</.badge>
<.badge
color="yellow"
content="99+"
wrapper={[extend_class: "mx-4"]}
>
<.heroicon color="slate" name="mail"/>
</.badge>
<.badge
color="green"
content="99+"
wrapper={[extend_class: "mx-4"]}
>
<.heroicon color="slate" name="mail"/>
</.badge>
<.badge
color="blue"
content="99+"
wrapper={[extend_class: "mx-4"]}
>
<.heroicon color="slate" name="mail"/>
</.badge>
<.badge
color="purple"
content="99+"
wrapper={[extend_class: "mx-4"]}
>
<.heroicon color="slate" name="mail"/>
</.badge>
You can use the border attribute to add a light/dark-aware border.
<.badge
border
color="green"
content="99+"
position="bottom_end"
variant="dot"
wrapper={[extend_class: "mx-4"]}
>
<.avatar/>
</.badge>
<.badge
border
content="99+"
position="right"
wrapper={[extend_class: "mx-4"]}
>
<.heroicon color="slate" name="mail"/>
</.badge>
The badge has 12 placements choices.
<div class="text-center">
<.badge content="99+" position="top_start">
<.heroicon color="slate" name="mail"/>
</.badge>
<.badge content="99+" position="top">
<.heroicon color="slate" name="mail"/>
</.badge>
<.badge content="99+" position="top_end">
<.heroicon color="slate" name="mail"/>
</.badge>
</div>
<div class="flex">
<div class="flex-1 text-center">
<.badge content="99+" position="left_start">
<.heroicon color="slate" name="mail"/>
</.badge>
<br />
<.badge content="99+" position="left">
<.heroicon color="slate" name="mail"/>
</.badge>
<br />
<.badge content="99+" position="left_end">
<.heroicon color="slate" name="mail"/>
</.badge>
</div>
<div class="flex-1 text-center">
<.badge content="99+" position="right_start">
<.heroicon color="slate" name="mail"/>
</.badge>
<br />
<.badge content="99+" position="right">
<.heroicon color="slate" name="mail"/>
</.badge>
<br />
<.badge content="99+" position="right_end">
<.heroicon color="slate" name="mail"/>
</.badge>
</div>
</div>
<div class="text-center">
<.badge content="99+" position="bottom_start">
<.heroicon color="slate" name="mail"/>
</.badge>
<.badge content="99+" position="bottom">
<.heroicon color="slate" name="mail"/>
</.badge>
<.badge content="99+" position="bottom_end">
<.heroicon color="slate" name="mail"/>
</.badge>
</div>
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Badge, only: [badge: 1]
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| border | bool | false | If true, the badge will have a border. |
| color | any tailwind color | blue | Any Tailwind-supported color. |
| extend_class | string | Adds additional classes. | |
| invisible | bool | false | If true, doesn't show the badge. |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| position | "bottom_end" | "bottom_start" | "bottom" | "left_end" | "left_start" | "left" | "right_end" | "right_start" | "right" | "top_end" | "top_start" | "top" | top_end | The position to use. |
| variant | "dot" | "standard" | standard | The variant to use. |
| wrapper | any attribute | Used to extend/override wrapper attributes |