Button

⌘

Used to trigger an action

Overview

Buttons are interactive elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels indicate what action will occur when the user interacts with it.

Variants

<button className="px-5 py-4 font-semibold rounded-2xl bg-blue-500 text-white text-lg hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">
    Primary
</button>
<button className="px-5 py-4 font-semibold rounded-2xl bg-blue-200 text-blue-500 text-lg hover:shadow-3xl hover:shadow-blue-200 ease-in-out duration-200">
    Secondary
</button>
<button className="px-5 py-4 font-semibold rounded-2xl bg-gray-200 text-gray-900 text-lg hover:shadow-3xl hover:shadow-gray-200 ease-in-out duration-200 dark:bg-gray-600 dark:text-gray-200 dark:shadow-gray-600">
    Tertiary
</button>
<button className="px-5 py-4 font-semibold rounded-2xl bg-transparent text-gray-500 text-lg hover:shadow-3xl hover:shadow-gray-100 hover:bg-gray-100 ease-in-out duration-200 dark:hover:bg-gray-800 dark:text-gray-400 dark:hover:shadow-gray-800">
    Ghost
</button>

Sizes

<button className="px-5 py-4 font-semibold rounded-2xl bg-blue-500 text-white text-lg hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">
    Large
</button>
<button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">
    Medium
</button>
<button className="px-3 py-2 font-semibold rounded-lg bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">
    Small
</button>

Affix

<button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200 flex">
  <Icon.ArrowUp className="mr-2" />
  <span className="grow">Upload</span>
</button>
<button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200 flex">
  <span className="grow">Download</span>
  <Icon.ArrowDown className="ml-2" />
</button>

Shapes

<button className="px-4 py-4 font-semibold rounded-2xl bg-blue-500 text-white text-lg hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">
  <Icon.MessageCircle />
</button>
<button className="px-4 py-4 font-semibold rounded-full bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">
  <Icon.Smile />
</button>

Alignments

<button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">
    Center
</button>
<button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200 text-left">
    Left
</button>
<button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200 text-right">
    Right
</button>
<button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200 flex text-right">
  <Icon.ArrowUp />
  <span className="grow">Upload</span>
</button>
<button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200 flex text-left">
  <span className="grow">Upload</span>
  <Icon.ArrowUp />
</button>
<button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200 flex">
  <Icon.ArrowUp />
  <span className="grow">Upload</span>
  <Icon.ArrowUp />
</button>