Phoenix UI

Badge

Basic Open in playground
99+ 
<.badge>
  <.icon name="hero-envelope"/>
  <:badge>99+</:badge>
</.badge>
Position Open in playground
99+
99+
99+
99+
99+
99+
99+
99+ 
<.badge position="top_left">
  <.button variant="outline">
    <.icon class="icon" name="hero-envelope"/>
  </.button>
  <:badge>99+</:badge>
</.badge>
<.badge position="top">
  <.button variant="outline">
    <.icon class="icon" name="hero-envelope"/>
  </.button>
  <:badge>99+</:badge>
</.badge>
<.badge position="top_right">
  <.button variant="outline">
    <.icon class="icon" name="hero-envelope"/>
  </.button>
  <:badge>99+</:badge>
</.badge>
<.badge position="right">
  <.button variant="outline">
    <.icon class="icon" name="hero-envelope"/>
  </.button>
  <:badge>99+</:badge>
</.badge>
<.badge position="bottom_right">
  <.button variant="outline">
    <.icon class="icon" name="hero-envelope"/>
  </.button>
  <:badge>99+</:badge>
</.badge>
<.badge position="bottom">
  <.button variant="outline">
    <.icon class="icon" name="hero-envelope"/>
  </.button>
  <:badge>99+</:badge>
</.badge>
<.badge position="bottom_left">
  <.button variant="outline">
    <.icon class="icon" name="hero-envelope"/>
  </.button>
  <:badge>99+</:badge>
</.badge>
<.badge position="left">
  <.button variant="outline">
    <.icon class="icon" name="hero-envelope"/>
  </.button>
  <:badge>99+</:badge>
</.badge>
Color Open in playground
99+
99+
99+ 
<.badge color="red">
  <.icon class="icon" name="hero-envelope"/>
  <:badge>99+</:badge>
</.badge>
<.badge color="blue">
  <.icon class="icon" name="hero-envelope"/>
  <:badge>99+</:badge>
</.badge>
<.badge color="green">
  <.icon class="icon" name="hero-envelope"/>
  <:badge>99+</:badge>
</.badge>
Empty or invisible Open in playground 
<.badge>
  <.icon name="hero-envelope"/>
  <:badge></:badge>
</.badge>
<.badge invisible>
  <.icon name="hero-envelope"/>
  <:badge></:badge>
</.badge>
Border Open in playground
99+ 
<.badge border>
  <.icon name="hero-envelope"/>
  <:badge>99+</:badge>
</.badge>