Button

Component Library

Browse and explore components

A Button is a UI component that triggers an action or event when clicked or tapped.

Basic Buttons

import { Button } from '@headlessui/react'

const BasicButtonsCode = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button bg-primary hover:bg-primary-emphasis'>Primary</Button>
        <Button className='ui-button bg-secondary hover:bg-secondary-emphasis'>Secondary</Button>
        <Button className='ui-button bg-success hover:bg-success-emphasis'>Success</Button>
        <Button className='ui-button bg-error hover:bg-error-emphasis'>Error</Button>
        <Button className='ui-button bg-warning hover:bg-warning-emphasis'>Warning</Button>
        <Button className='ui-button bg-info hover:bg-info-emphasis'>Info</Button>
      </div>
    </div>
  )
}

export default BasicButtonsCode

Light Buttons

import { Button } from '@headlessui/react'

const LightButtonsCode = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button bg-lightprimary text-primary hover:bg-primary hover:text-white'>
          Primary
        </Button>
        <Button className='ui-button bg-lightsecondary text-secondary hover:bg-secondary hover:text-black'>
          Secondary
        </Button>
        <Button className='ui-button bg-lightsuccess text-success hover:bg-success hover:text-white'>
          Success
        </Button>
        <Button className='ui-button bg-lighterror text-error hover:bg-error hover:text-white'>
          Error
        </Button>
        <Button className='ui-button bg-lightwarning text-warning hover:bg-warning hover:text-white'>
          Warning
        </Button>
        <Button className='ui-button bg-lightinfo text-info hover:bg-info hover:text-white'>
          Info
        </Button>
      </div>
    </div>
  )
}

export default LightButtonsCode

Rounded Buttons

import { Button } from '@headlessui/react'

const RoundedButtonCode = () => {
  return (
    <>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button-rounded bg-primary hover:bg-primary-emphasis'>
          Primary
        </Button>
        <Button className='ui-button-rounded bg-secondary hover:bg-secondary-emphasis'>
          Secondary
        </Button>
        <Button className='ui-button-rounded bg-success hover:bg-success-emphasis'>
          Success
        </Button>
        <Button className='ui-button-rounded bg-error hover:bg-error-emphasis'>
          Error
        </Button>
        <Button className='ui-button-rounded bg-warning hover:bg-warning-emphasis'>
          Warning
        </Button>
        <Button className='ui-button-rounded bg-info hover:bg-info-emphasis'>
          Info
        </Button>
      </div>
    </>
  )
}

export default RoundedButtonCode

Square Outlined Buttons

import { Button } from '@headlessui/react'

const SquareOutlineBtnCode = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button border border-primary text-primary hover:bg-primary hover:text-white rounded-md'>
          Primary
        </Button>
        <Button className='ui-button border border-secondary text-secondary hover:bg-secondary hover:text-black rounded-md'>
          Secondary
        </Button>
        <Button className='ui-button border border-success text-success hover:bg-success hover:text-white rounded-md'>
          Success
        </Button>
        <Button className='ui-button border border-error text-error hover:bg-error hover:text-white rounded-md'>
          Error
        </Button>
        <Button className='ui-button border border-warning text-warning hover:bg-warning hover:text-white rounded-md'>
          Warning
        </Button>
        <Button className='ui-button border border-info text-info hover:bg-info hover:text-white rounded-md'>
          Info
        </Button>
      </div>
    </div>
  )
}

export default SquareOutlineBtnCode

Rounded Outlined Buttons

import { Button } from '@headlessui/react'

const RoundedOutlinedBtnCode = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button-rounded border border-primary text-primary hover:bg-primary hover:text-white'>
          Primary
        </Button>
        <Button className='ui-button-rounded border border-secondary text-secondary hover:bg-secondary hover:text-black'>
          Secondary
        </Button>
        <Button className='ui-button-rounded border border-success text-success hover:bg-success hover:text-white'>
          Success
        </Button>
        <Button className='ui-button-rounded border border-error text-error hover:bg-error hover:text-white'>
          Error
        </Button>
        <Button className='ui-button-rounded border border-warning text-warning hover:bg-warning hover:text-white'>
          Warning
        </Button>
        <Button className='ui-button-rounded border border-info text-info hover:bg-info hover:text-white'>
          Info
        </Button>
      </div>
    </div>
  )
}

export default RoundedOutlinedBtnCode

Disable Buttons

import { Button } from '@headlessui/react'

const DisableButtonsCode = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button bg-primary !cursor-not-allowed' disabled>
          Primary
        </Button>
        <Button className='ui-button bg-secondary !cursor-not-allowed' disabled>
          Secondary
        </Button>
        <Button className='ui-button bg-success !cursor-not-allowed' disabled>
          Success
        </Button>
        <Button className='ui-button bg-error !cursor-not-allowed' disabled>
          Error
        </Button>
        <Button className='ui-button bg-warning !cursor-not-allowed' disabled>
          Warning
        </Button>
        <Button className='ui-button bg-info !cursor-not-allowed' disabled>
          Info
        </Button>
      </div>
    </div>
  )
}

export default DisableButtonsCode

Disable Outlined Buttons

import { Button } from '@headlessui/react'

const DisableOutlineBtn = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button
          className='ui-button border border-primary text-primary !cursor-not-allowed'
          disabled>
          Primary
        </Button>
        <Button
          className='ui-button border border-secondary text-secondary  !cursor-not-allowed'
          disabled>
          Secondary
        </Button>
        <Button
          className='ui-button border border-success text-success !cursor-not-allowed'
          disabled>
          Success
        </Button>
        <Button
          className='ui-button border border-error text-error !cursor-not-allowed'
          disabled>
          Error
        </Button>
        <Button
          className='ui-button border border-warning text-warning !cursor-not-allowed'
          disabled>
          Warning
        </Button>
        <Button
          className='ui-button border border-info text-info !cursor-not-allowed'
          disabled>
          Info
        </Button>
      </div>
    </div>
  )
}

export default DisableOutlineBtn

Component Library

INPUTS

DATA DISPLAY

FEEDBACK

NAVIGATION

SURFACES

UTILS

CHARTS

Button

Basic Buttons

Component Code

Light Buttons

Component Code

Rounded Buttons

Component Code

Square Outlined Buttons

Component Code

Rounded Outlined Buttons

Component Code

Disable Buttons

Component Code

Disable Outlined Buttons

Component Code