Phenix Storybook
Pick a theme
Displays
Riders
Components
Buttons
Dropdown
Quick search...
⌘K
Storybook
Colors
Typography
Components
Accordion
Badge
Chart
Google Map
Illustration
Infinite Scroll
Media Content
Message
Modal
Progress
Radial progress
Slide
Tooltip
Buttons
Button
Button Group
Dropdown
Form
Layout
Navigation
Table
Examples
- 0.6.4
Colors
Colors
Typography
Typography
Accordion
Components
Accordion
Badge
Components
Badge
Chart
Components
Chart
Google Map
Components
Google Map
Illustration
Components
Illustration
Infinite Scroll
Components
Infinite Scroll
Media Content
Components
Media Content
Message
Components
Message
Modal
Components
Modal
Progress
Components
Progress
Radial progress
Components
Radial progress
Slide
Components
Slide
Tooltip
Components
Tooltip
Button
Components
Buttons
Button
Button Group
Components
Buttons
Button Group
Dropdown
Components
Buttons
Dropdown
Avatar Upload
Components
Form
Avatar Upload
Checkbox
Components
Form
Checkbox
Color Picker
Components
Form
Color Picker
Date Picker
Components
Form
Date Picker
File Upload
Components
Form
File Upload
Input Range
Components
Form
Input Range
Multi Days Time Picker
Components
Form
Multi Days Time Picker
Radio
Components
Form
Radio
Select
Components
Form
Select
Text Input
Components
Form
Text Input
Time Picker
Components
Form
Time Picker
Toggle Switch
Components
Form
Toggle Switch
Description List
Components
Layout
Description List
Section Heading
Components
Layout
Section Heading
Breadcrumb
Components
Navigation
Breadcrumb
Tabs
Components
Navigation
Tabs
Table
Components
Table
Table
Table Front
Components
Table
Table Front
Form
Examples
Form
Google Map
Examples
Google Map
Table
Examples
Table
Dropdown
Stories
Playground
Source
Stories
Playground
Source
Preview
Code
Dropdown
First item
Second item
Attributes
Event logs
Attribute
Type
Documentation
Default
Value
color
:atom
The dropdown color.
:primary
default
primary
secondary
danger
success
transparent
outline
:boolean
Default dropdowns are filled with colors, outline buttons aren't
false
size
:atom
The button size.
:default
default
small
Required
text
*
:string
The text to display into the button.
icon
:string
The fontawesome class of the icon
href
:string
The link to redirect on click.
single
:boolean
make it displayed as a single, non splitted, button
false
id
:string
rest
:global
class
:string
Extends dropdown class
wrapper_class
:string
Dropdown wrapping container class
text_class
:string
Extends dropdown text class
toggle_button_class
:string
Extends dropdown toggle button class
icon_class
:string
Extends dropdown inco class
content_class
:string
Extends dropdown content class
single_icon_class
:string
Extends dropdown single icon class
Required
inner_block
*
:slot
Put here a list of <.dropdown_item/>
<.dropdown_item text="First item"/> <.dropdown_item text="Second item"/>
Open a variation
Default
Outline
Single
Colors and icon
Sizes
Items with link