Tremorx

Badge

Badges are subtle elements to highlight information which are often used in tables and lists as well as in combination with metrics

Default Open in playground

Updated

Live 

<.grid num_items="3" class="gap-x-2 gap-y-2 py-4">
    <.badge class="mx-auto">
      Updated
    </.badge>
    <.badge class="mx-auto">
      <:icon>
        <.icon name="hero-signal" />
      </:icon>
      Live
    </.badge>
  </.grid>
Default with icon Open in playground

Live 

<.badge class="mx-auto">
  <:icon>
    <.icon name="hero-signal" />
  </:icon>
  Live
</.badge>
Default badge delta icon only Open in playground 

<.grid num_items="3" class="gap-x-2 gap-y-2 py-4">
    <.badge_delta/>
  </.grid>
Default badge delta icon with text Open in playground

21.26%

increase 

<.grid num_items="3" class="gap-x-2 gap-y-2 py-4">
    <.badge_delta delta_type="moderate_decrease"> 21.26% </.badge_delta>
    <.badge_delta delta_type="increase"> increase </.badge_delta>
  </.grid>