Components

Buttons

Buttons are used primarily for actions, such as “Save”, “Cancel”, “Close”. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “settings”.

Examples

Default buttons

   <div class="flex flex-row space-x-2">
     <div><button class="btn btn-xs">button</button></div>
     <div><button class="btn btn-sm">button</button></div>
     <div><button class="btn btn-md">button</button></div>
     <div><button class="btn btn-lg">Large button</button></div>
   </div>

Light buttons

<div class="flex space-x-2">
   <div><button class="btn-light btn-xs">button</button></div>
   <div><button class="btn-light btn-sm">button</button></div>
   <div><button class="btn-light btn-md">button</button></div>
   <div><button class="btn-light btn-lg">Large button</button></div>
</div>

Transparent buttons

<div class="flex space-x-2">
   <div><button class="btn-transparent btn-xs">button</button></div>
   <div><button class="btn-transparent btn-sm">button</button></div>
   <div><button class="btn-transparent btn-md">button</button></div>
   <div><button class="btn-transparent btn-lg">Large button</button></div>
</div>