Button

<button type="button"> 1 </button>

<Button>1</Button>

<button type="button"> type submit Button </button>

<Button>type submit Button</Button>

<button type="button" aria-disabled="true"> Button aria disabled
</button><button type="button" disabled aria-disabled="true"> Button disabled
</button>

<Button aria-disabled="true">Button aria disabled</Button>
<Button disabled>Button disabled</Button>

<button type="button"> <svg viewBox="0 0 24 24" width="24" height="24"
    fill="currentColor" role="img"> <path
      d="M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z"></path>
  </svg> Button with left icon </button><button type="button"> Button with right
  icon <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"
    role="img"> <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> </button>

<Button>
  <Check slot="before-button" />Button with left icon
</Button>
<Button>
  <Cross slot="after-button" />Button with right icon
</Button>

<button type="button" aria-label="Delete"> <svg viewBox="0 0 24 24" width="24"
    height="24" fill="currentColor" role="img"> <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> </button>

<Button aria-label="Delete"><Cross /></Button>

<button class="reverse" type="button"> type submit Button </button>

<Button variant="reverse">type submit Button</Button>

<button class="reverse" type="button" aria-disabled="true"> Button aria disabled
</button><button class="reverse" type="button" disabled aria-disabled="true">
  Button disabled </button>

<Button variant="reverse" aria-disabled="true">Button aria disabled</Button>
<Button  variant="reverse" disabled>Button disabled</Button>

<button class="reverse" type="button"> <svg viewBox="0 0 24 24" width="24"
    height="24" fill="currentColor" role="img"> <path
      d="M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z"></path>
  </svg> Button with left icon </button><button class="reverse" type="button">
  Button with right icon <svg viewBox="0 0 24 24" width="24" height="24"
    fill="currentColor" role="img"> <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> </button>

<Button variant="reverse">
  <Check slot="before-button" />Button with left icon
</Button>
<Button variant="reverse">
  <Cross slot="after-button" />Button with right icon
</Button>

<button class="reverse" type="button" aria-label="Delete"> <svg
    viewBox="0 0 24 24" width="24" height="24" fill="currentColor" role="img">
    <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> </button>

<Button  variant="reverse" aria-label="Delete"><Cross /></Button>

<button class="ghost" type="button"> type submit Button </button>

<Button variant="ghost">type submit Button</Button>

<button class="ghost" type="button" aria-disabled="true"> Button aria disabled
</button><button class="ghost" type="button" disabled aria-disabled="true">
  Button disabled </button>

<Button variant="ghost" aria-disabled="true">Button aria disabled</Button>
<Button  variant="ghost" disabled>Button disabled</Button>

<button class="ghost" type="button"> <svg viewBox="0 0 24 24" width="24"
    height="24" fill="currentColor" role="img"> <path
      d="M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z"></path>
  </svg> Button with left icon </button><button class="ghost" type="button">
  Button with right icon <svg viewBox="0 0 24 24" width="24" height="24"
    fill="currentColor" role="img"> <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> </button>

<Button variant="ghost">
  <Check slot="before-button" />Button with left icon
</Button>
<Button variant="ghost">
  <Cross slot="after-button" />Button with right icon
</Button>

<button class="ghost" type="button" aria-label="Delete"> <svg
    viewBox="0 0 24 24" width="24" height="24" fill="currentColor" role="img">
    <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> </button>

<Button  variant="ghost" aria-label="Delete"><Cross /></Button>

<button class="small" type="button"> type submit Button </button>

<Button variant="small">type submit Button</Button>

<button class="small" type="button" aria-disabled="true"> Button aria disabled
</button><button class="small" type="button" disabled aria-disabled="true">
  Button disabled </button>

<Button variant="small" aria-disabled="true">Button aria disabled</Button>
<Button  variant="small" disabled>Button disabled</Button>

<button class="small" type="button"> <svg viewBox="0 0 24 24" width="24"
    height="24" fill="currentColor" role="img"> <path
      d="M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z"></path>
  </svg> Button with left icon </button><button class="small" type="button">
  Button with right icon <svg viewBox="0 0 24 24" width="24" height="24"
    fill="currentColor" role="img"> <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> </button>

<Button variant="small">
  <Check slot="before-button" />Button with left icon
</Button>
<Button variant="small">
  <Cross slot="after-button" />Button with right icon
</Button>

<button class="small" type="button" aria-label="Delete"> <svg
    viewBox="0 0 24 24" width="24" height="24" fill="currentColor" role="img">
    <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> </button>

<Button  variant="small" aria-label="Delete"><Cross /></Button>

<button class="danger" type="button"> Danger </button>

<Button variant="danger">Danger</Button>

<button class="danger reverse" type="button"> Danger reverse </button>

<Button variant="danger reverse">Danger</Button>

<button class="danger" type="button"> <svg viewBox="0 0 24 24" width="24"
    height="24" fill="currentColor" role="img"> <path
      d="M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z"></path>
  </svg> Danger with left icon </button><button class="danger" type="button">
  Danger with right icon <svg viewBox="0 0 24 24" width="24" height="24"
    fill="currentColor" role="img"> <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> </button>

 <Button variant="danger">
  <Check slot="before-button" />Danger with left icon
</Button>
<Button variant="danger">
  <Cross slot="after-button" />Danger with right icon
</Button>

<button class="danger" type="button" aria-label="Delete"> <svg
    viewBox="0 0 24 24" width="24" height="24" fill="currentColor" role="img">
    <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> </button>

<Button variant="danger" aria-label="Delete"><Cross /></Button>