Version 2.0

Button

Elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar.

Import

Example code
import Button from 'components/@ui/button'

Usage

Example code
<Button>Default</Button>

Colors

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Button color='primary'>Primary</Button>
  <Button color='secondary'>Secondary</Button>
</div>

Disabled

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Button color='primary' disabled>Disabled</Button>
  <Button color='secondary' disabled>Disabled</Button>
</div>

Sizes

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Button color='primary' size='sm'>Button sm</Button>
  <Button color='primary' size='md'>Button md</Button>
  <Button color='primary' size='lg'>Button lg</Button>
  <Button color='primary' size='xl'>Button xl</Button>
</div>

Full width

Example code
<div className='block space-y-2'>
  <Button color='primary' fullWidth={true}>Button sm</Button>
  <Button color='primary' fullWidth={true}>Button md</Button>
</div>

With grid container

Example code
<div className='grid space-y-2'>
  <Button color='primary'>Button sm</Button>
  <Button color='primary'>Button md</Button>
</div>

With icons

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Button color='primary'>
    <span>Button</span>
    <svg 
      width={24} 
      height={24} 
      fill="none" 
      stroke="currentColor" 
      strokeLinecap="round" 
      strokeLinejoin="round" 
      strokeWidth={2} 
      viewBox="0 0 24 24" 
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="m13.75 6.75 5.5 5.25-5.5 5.25" />
      <path d="M19 12H4.75" />
    </svg>
  </Button>
</div>

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Button color='primary'>
    <svg 
      width={24} 
      height={24} 
      fill="none" 
      stroke="currentColor" 
      strokeLinecap="round" 
      strokeLinejoin="round" 
      strokeWidth={2} 
      viewBox="0 0 24 24" 
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M10.25 6.75 4.75 12l5.5 5.25" />
      <path d="M19.25 12H5" />
    </svg>
    <span>Button</span>
  </Button>
</div>

Link

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Button href="/" passHref as={Link} color='primary'>
    Button link
  </Button>
</div>