Phenix Storybook
Pick a theme
Displays
Riders
Components
Buttons
Button
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.1
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
Button
Stories
Playground
Source
Stories
Playground
Source
Preview
Code
Update me
Oops, you can't update me
Attributes
Event logs
Attribute
Type
Documentation
Default
Value
id
:string
Button id
text
:string
The text to display into the button.
type
:atom
:button
button
submit
color
:atom
The button color
:primary
default
primary
secondary
info
warning
danger
error
success
outline
:boolean
Default buttons are filled with colors, outline buttons aren't
false
navigate
:atom
This option allows you to specify which type of redirect you want
:navigate
plain
patch
navigate
disabled
:boolean
Disabled button can not be interacted with
false
loading
:boolean
Displays a spinner before the text button.
false
size
:atom
The button size.
:default
default
small
title
:string
The title used by the browser to display a tooltip on hover.
href
:string
Make the button a mere link
target
:string
The target of the link, usually _blank
disabled_tooltip
:string
The tooltip to display when the button is disabled.
icon
:string
FontAwesome icon class
class
:string
Extend button class
disabled_class
:string
Extend button disabled class
text_class
:string
Extends inner span class
confirm
:string
When used, ask the user with this confirmation
form
:string
The form id associated to the button
rest
:global
inner_block
:slot
Optional button content
Open a variation
Default
With colors
Outline button
Small button
Loading button
With icons
Disabled button with tooltip