<.dm_btn id="button-color-variants-primary" variant="primary">
  Primary
</.dm_btn>
<.dm_btn id="button-color-variants-secondary" variant="secondary">
  Secondary
</.dm_btn>
<.dm_btn id="button-color-variants-tertiary" variant="tertiary">
  Tertiary
</.dm_btn>
<.dm_btn id="button-color-variants-accent" variant="accent">
  Accent
</.dm_btn>
<.dm_btn id="button-color-variants-info" variant="info">
  Info
</.dm_btn>
<.dm_btn id="button-color-variants-success" variant="success">
  Success
</.dm_btn>
<.dm_btn id="button-color-variants-warning" variant="warning">
  Warning
</.dm_btn>
<.dm_btn id="button-color-variants-error" variant="error">
  Error
</.dm_btn>

<.dm_btn id="button-style-variants-ghost" variant="ghost">
  Ghost
</.dm_btn>
<.dm_btn id="button-style-variants-outline" variant="outline">
  Outline
</.dm_btn>
<.dm_btn id="button-style-variants-link" variant="link">
  Link
</.dm_btn>

<.dm_btn id="button-sizes-xs" size="xs" variant="primary">
  Extra Small
</.dm_btn>
<.dm_btn id="button-sizes-sm" size="sm" variant="primary">
  Small
</.dm_btn>
<.dm_btn id="button-sizes-md" size="md" variant="primary">
  Medium
</.dm_btn>
<.dm_btn id="button-sizes-lg" size="lg" variant="primary">
  Large
</.dm_btn>

<.dm_btn id="button-shapes-square" variant="primary" shape="square">
  S
</.dm_btn>
<.dm_btn id="button-shapes-circle" variant="primary" shape="circle">
  O
</.dm_btn>

<.dm_btn id="button-states-loading" loading variant="primary">
  Loading...
</.dm_btn>
<.dm_btn disabled id="button-states-disabled" variant="primary">
  Disabled
</.dm_btn>

<.dm_btn
  id="button-single-native-submit"
  form="settings-form"
  variant="primary"
  native_submit
>
  Save without JavaScript
</.dm_btn>

<.dm_btn id="button-single-accessible-icon" variant="error" aria-label="Remove item">
  <span aria-hidden="true">×</span>
</.dm_btn>

<.dm_btn id="button-slots-with-prefix" variant="primary">
  <:prefix>→</:prefix>
  Save
</.dm_btn>
<.dm_btn id="button-slots-with-suffix" variant="secondary">
  Next
  <:suffix>›</:suffix>
</.dm_btn>

<.dm_btn
  id="button-confirm-remove"
  confirm="Do you really want to remove it?"
  variant="error"
  confirm_title="Attention!"
  phx-click="remove"
>
  Remove
</.dm_btn>
<.dm_btn
  id="button-confirm-export"
  confirm="Are you sure you want to export?"
  variant="info"
>
  Export
  <:confirm_action>
  <form method="dialog">
    <el-dm-button variant="info" size="sm" phx-click="export">Export CSV</el-dm-button>
  </form>
  </:confirm_action>
</.dm_btn>

<.dm_btn
  id="button-confirm-customization-custom-button-text"
  confirm="This action cannot be undone."
  variant="warning"
  confirm_text="Proceed"
  cancel_text="Go Back"
>
  Delete Account
</.dm_btn>
<.dm_btn
  id="button-confirm-customization-no-cancel-button"
  confirm="Your changes have been saved."
  variant="success"
  confirm_text="OK"
>
  Save
</.dm_btn>
<.dm_btn
  id="button-confirm-customization-custom-dialog-label"
  confirm="Do you want to publish this post?"
  variant="primary"
  confirm_label="Publish confirmation"
>
  Publish
</.dm_btn>

<.dm_btn id="button-single-with-noise" content="Waiting for noise" noise>
  Primary Action
</.dm_btn>