<.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"
 />