Phoenix Storybook
Pick a color mode
Light
Dark
System
Pick a theme
Default
Colorful
Styleguide
Colors
Quick search...
⌘K
Storybook
Welcome Page
Components
Core components
Back
Button
Error
Flash
Icon
Input
List
Table
Examples
Styleguide
Colors
Typography
- 0.8.0
Welcome Page
Welcome Page
Badge
Components
Badge
Button
Components
Buttons
Button
Button Iframe
Components
Buttons
Button Iframe
Dropdown
Components
Buttons
Dropdown
Live Button
Components
Live
Live Button
Live Button Iframe
Components
Live
Live Button Iframe
Modal
Components
Templates
Modal
Slide-over
Components
Templates
Slide-over
Set assigns
Components
Templates
Set assigns
Back
Core components
Back
Button
Core components
Button
Error
Core components
Error
Flash
Core components
Flash
Icon
Core components
Icon
Input
Core components
Input
List
Core components
List
Table
Core components
Table
Core components
Examples
Core components
Forms
Examples
Forms
Colors
Styleguide
Colors
Typography
Styleguide
Typography
Colors
Default
Primary
Info
Success
Warning
Danger
#4B5563
gray-600
Default color will be used for almost all texts, borders and secondary actions.
text-default-txt
Lorem ipsum dolor sit amet consectetur adipisicing elit.
text-default-txt-secondary
Lorem ipsum dolor sit amet consectetur adipisicing elit.
text-default-txt-informative
Lorem ipsum dolor sit amet consectetur adipisicing elit.
text-default-txt-hover
Lorem ipsum dolor sit amet consectetur adipisicing elit.
border-default-border
bg-default-bg
Lorem Ipsum
dolor sit amet consectetur adipisicing elit. Ullam, voluptate.
bg-default-bg-hover
Lorem Ipsum
dolor sit amet consectetur adipisicing elit. Ullam, voluptate.
bg-default-bg-disabled
Lorem Ipsum
dolor sit amet consectetur adipisicing elit. Ullam, voluptate.
bg-white
Normal
bg-default-btn-hover
Hover
ring-default-btn-focus
Focus
bg-default-btn-disabled
Disabled