Phoenix + DaisyUI

Setup
Setup
Welcome
Welcome
Alert
Components Alert
Avatar
Components Avatar
Badge
Components Badge
Breadcrumbs
Components Breadcrumbs
Button
Components Button
Card
Components Card
Checkbox
Components Checkbox
Drawer
Components Drawer
Dropdown
Components Dropdown
Flash
Components Flash
Header
Components Header
Hero
Components Hero
Indicator
Components Indicator
Input
Components Input
Join
Components Join
List
Components List
Loading
Components Loading
Menu
Components Menu
Modal
Components Modal
Navbar
Components Navbar
Pagination
Components Pagination
Radio
Components Radio
Range
Components Range
Select
Components Select
Simple Form
Components Simple Form
Stat
Components Stat
Swap
Components Swap
Table
Components Table
Text Input
Components Text Input
Textarea
Components Textarea
Toggle
Components Toggle
Tooltip
Components Tooltip
Core Components
Examples Core Components

Indicator

content

<.indicator >
  <:badge color="success">hi</:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Indicator badge with content Open in playground

new

content

<.indicator >
  <:badge color="primary">new</:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Indicator for button Open in playground

99+

<.indicator >
  <:badge color="secondary">99+</:badge>
  <.button>Inbox</.button>
</.indicator>

Indicator for input Open in playground

Required

<.indicator >
  <:badge>Required</:badge>
  <.input bordered placeholder="Your email address" />
</.indicator>

Indicator start Open in playground

content

<.indicator >
  <:badge color="secondary" align="start"></:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Indicator center Open in playground

content

<.indicator >
  <:badge color="secondary" align="center"></:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Indicator end Open in playground

content

<.indicator >
  <:badge color="secondary" align="end"></:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Indicator middle start Open in playground

content

<.indicator >
  <:badge color="secondary" direction="middle" align="start"></:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Indicator middle center Open in playground

content

<.indicator >
  <:badge color="secondary" direction="middle" align="center"></:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Indicator middle end Open in playground

content

<.indicator >
  <:badge color="secondary" direction="middle" align="end"></:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Indicator start bottom Open in playground

content

<.indicator >
  <:badge color="secondary" direction="bottom" align="start"></:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Indicator bottom center Open in playground

content

<.indicator >
  <:badge color="secondary" direction="bottom" align="center"></:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Indicator bottom end Open in playground

content

<.indicator >
  <:badge color="secondary" direction="bottom" align="end"></:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>

Multiple indicator Open in playground

content

<.indicator >
  <:badge color="secondary" direction="top" align="start"></:badge>
  <:badge color="secondary" direction="bottom" align="start"></:badge>
  <:badge color="secondary" direction="middle" align="start"></:badge>
  <:badge color="secondary" direction="top" align="end"></:badge>
  <:badge color="secondary" direction="bottom" align="end"></:badge>
  <:badge color="secondary" direction="middle" align="end"></:badge>
  <:badge color="secondary" direction="top" align="center"></:badge>
  <:badge color="secondary" direction="bottom" align="center"></:badge>
  <:badge color="secondary" direction="middle" align="center"></:badge>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>