Phoenix UI
Pick a color mode
Light
Dark
System
Components
Badge
Quick search...
⌘K
Phoenix UI
Getting started
Components
Accordion
Avatar
Avatar Group
Backdrop
Badge
Breadcrumb
Button
Divider
Paper
Popover
Progress
- 0.7.2
Getting started
Getting started
Accordion
Components
Accordion
Avatar
Components
Avatar
Avatar Group
Components
Avatar Group
Backdrop
Components
Backdrop
Badge
Components
Badge
Breadcrumb
Components
Breadcrumb
Button
Components
Button
Divider
Components
Divider
Paper
Components
Paper
Popover
Components
Popover
Progress
Components
Progress
Badge
Stories
Playground
Source
Stories
Playground
Source
Preview
Code
99+
99+
99+
Attributes
Event logs
Attribute
Type
Documentation
Default
Value
border
:boolean
false
class
:any
Extend existing component styles
color
:string
"blue"
element
:string
"div"
invisible
:boolean
false
position
:string
"top_right"
rest
:global
Required
badge
*
:slot
<.icon class="icon" name="hero-envelope"/> <:badge>99+</:badge>
Required
inner_block
*
:slot
Open a variation
Basic
Position
Color
Empty or invisible
Border