<.button id="button-single-default" text="Default button"/>

<.button id="button-with-colors-default" text="Colors" color={:default}/>
<.button id="button-with-colors-primary" text="Colors" color={:primary}/>
<.button id="button-with-colors-danger" text="Colors" color={:danger}/>
<.button id="button-with-colors-success" text="Colors" color={:success}/>

<.button id="button-outline-button-default" text="Outline" color={:default} outline/>
<.button id="button-outline-button-primary" text="Outline" color={:primary} outline/>
<.button id="button-outline-button-danger" text="Outline" color={:danger} outline/>
<.button id="button-outline-button-success" text="Outline" color={:success} outline/>

<.button id="button-single-small-button" size={:small} text="Small button"/>

<.button id="button-single-loading-button" loading text="Serious stuff going on"/>

<.button id="button-with-icons-fa fa-play" text="Fancy icon" icon="fa fa-play" outline/>
<.button id="button-with-icons-fa fa-check" text="Fancy icon" icon="fa fa-check" outline/>
<.button id="button-with-icons-fad fa-skull" text="Fancy icon" icon="fad fa-skull" outline/>

<.button disabled id="button-single-disabled-button-with-tooltip" text="Update me" disabled_tooltip="Oops, you can't update me"/>