Phenix Storybook

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 Group

<.button_group>
  <.button text="Valider" type={:submit}/>
</.button_group>

Styled button group Open in playground

<.button_group>
  <.button text="Click me" icon="fa fa-check"/>
</.button_group>

Danger button group Open in playground

<.button_group class="!justify-* justify-start">
  <.button text="Bio Hazard!" color={:danger} icon="fas fa-radiation-alt"
    confirm="Vraiment sûr de faire ça ?"
  />
</.button_group>