Phoenix Duskmoon UI Storybook

Actionbar
Components Actionbar
Avatar
Components Avatar
Badge
Components Badge
Breadcrumb
Components Breadcrumb
Button
Components Button
Button Noise
Components Button Noise
Card
Components Card
Divider
Components Divider
Dropdown
Components Dropdown
Eclipse
Components Eclipse
Form
Components Form
Forms Showcase
Components Forms Showcase
Fun Showcase
Components Fun Showcase
Left Menu
Components Left Menu
Left Menu Group
Components Left Menu Group
Link
Components Link
Loading
Components Loading
Markdown
Components Markdown
Modal
Components Modal
Navbar
Components Navbar
Pagination
Components Pagination
Pagination Thin
Components Pagination Thin
Plasma Ball
Components Plasma Ball
Progress
Components Progress
Signature
Components Signature
Skeleton
Components Skeleton
Snow
Components Snow
Spotlight Search
Components Spotlight Search
Tab
Components Tab
Table
Components Table
Tooltip
Components Tooltip
Ui Showcase
Components Ui Showcase
Checkbox
Components Form Checkbox
Color Picker
Components Form Color Picker
Compact Input
Components Form Compact Input
Datepicker
Components Form Datepicker
File Upload
Components Form File Upload
Input
Components Form Input
Password Strength
Components Form Password Strength
Radio
Components Form Radio
Range Slider
Components Form Range Slider
Rating
Components Form Rating
Rich Text
Components Form Rich Text
Search With Suggestions
Components Form Search With Suggestions
Select
Components Form Select
Slider
Components Form Slider
Slider Range
Components Form Slider Range
Switch
Components Form Switch
Tags
Components Form Tags
Textarea
Components Form Textarea
Timepicker
Components Form Timepicker

Avatar

<.dm_avatar alt="User Avatar" src="https://picsum.photos/seed/user1/100/100.jpg"/>

With border Open in playground

<.dm_avatar alt="User Avatar" border src="https://picsum.photos/seed/user2/100/100.jpg"/>

Online status Open in playground

<.dm_avatar
  alt="User Avatar"
  border
  src="https://picsum.photos/seed/user3/100/100.jpg"
  online
/>

Offline status Open in playground

<.dm_avatar
  alt="User Avatar"
  border
  src="https://picsum.photos/seed/user4/100/100.jpg"
  offline
/>

Text based Open in playground

<.dm_avatar name="John Doe" color="primary"/>

Text based colored Open in playground

<.dm_avatar name="Jane Smith" color="success"/>

Size variants Open in playground

<.dm_avatar size="xs" alt="User Avatar" src="https://picsum.photos/seed/user5/100/100.jpg"/>

Small avatar Open in playground

<.dm_avatar size="sm" alt="User Avatar" src="https://picsum.photos/seed/user6/100/100.jpg"/>

Large avatar Open in playground

<.dm_avatar
  size="lg"
  alt="User Avatar"
  border
  src="https://picsum.photos/seed/user7/100/100.jpg"
/>

Extra large avatar Open in playground

<.dm_avatar
  size="xl"
  alt="User Avatar"
  border
  src="https://picsum.photos/seed/user8/100/100.jpg"
  online
/>

Square shape Open in playground

<.dm_avatar
  alt="User Avatar"
  border
  shape="square"
  src="https://picsum.photos/seed/user9/100/100.jpg"
/>

Different colors Open in playground

<.dm_avatar name="Alex Johnson" color="accent"/>

Warning color Open in playground

<.dm_avatar name="Warning User" color="warning"/>

Error color Open in playground

<.dm_avatar name="Error User" color="error"/>

Info color Open in playground

<.dm_avatar name="Info User" color="info"/>

Short name Open in playground

<.dm_avatar name="A" color="secondary"/>

Two initials Open in playground

<.dm_avatar name="John Smith" color="primary"/>

Without name Open in playground

<.dm_avatar color="info"/>