Button

The Button component extends the button HTML element. Use Button to handle events and navigate users.

Usage

Import the Button component from @avocado-ui/react and render like so

import { Button } from '@avocado-ui/react'
render(<Button>New Button</Button>)

import { Button } from '@avocado-ui/react'
render(<Button>New Button</Button>)

Variants

The Button comes in 4 major variants - primary, success. warning, error. Show the most appropriate with the variant prop.

import { Button } from '@avocado-ui/react'

render(
  <>
    <Button variant='primary'>New Button</Button>
    <Button variant='error'>New Button</Button>
    <Button variant='success'>New Button</Button>
    <Button variant='warning'>New Button</Button>
  </>
)

import { Button } from '@avocado-ui/react'

render(
  <>
    <Button variant='primary'>New Button</Button>
    <Button variant='error'>New Button</Button>
    <Button variant='success'>New Button</Button>
    <Button variant='warning'>New Button</Button>
  </>
)

Shape

Button can be in one of 3 shapes - round, curve and square. Use the shape prop to specified the desired border shape.

import { Button } from '@avocado-ui/react'
render(
  <>
    <Button shape='curve'>New Button</Button>
    <Button shape='round'>New Button</Button>
    <Button shape='square'>New Button</Button>
  </>
)

import { Button } from '@avocado-ui/react'
render(
  <>
    <Button shape='curve'>New Button</Button>
    <Button shape='round'>New Button</Button>
    <Button shape='square'>New Button</Button>
  </>
)

Size

Button comes in 3 sizes - sm, md and lg respectively. Set the desired size with the size prop.

import { Button } from '@avocado-ui/react'
render(
  <>
    <Button size='sm'>New Button</Button>
    <Button size='md'>New Button</Button>
    <Button size='lg'>New Button</Button>
  </>
)

import { Button } from '@avocado-ui/react'
render(
  <>
    <Button size='sm'>New Button</Button>
    <Button size='md'>New Button</Button>
    <Button size='lg'>New Button</Button>
  </>
)

Button Type

You can set the type of the Button with the buttonType prop. Set it to unstyled, solid or outline to get the desired Button.

import { Button } from '@avocado-ui/react'
render(
  <>
    <Button buttonType='unstyled'>New Button</Button>
    <Button buttonType='solid'>New Button</Button>
    <Button buttonType='outline'>New Button</Button>
  </>
)

import { Button } from '@avocado-ui/react'
render(
  <>
    <Button buttonType='unstyled'>New Button</Button>
    <Button buttonType='solid'>New Button</Button>
    <Button buttonType='outline'>New Button</Button>
  </>
)

Button With Icon

It's very common to pair the Button component with icons. You can do this with the prefixIcon and suffixIcon prop. You'll have to set this to a React.ReactNode component, but it's more advisable to use an icon. Here's it working with feather icons.

import { Button } from '@avocado-ui/react'
import { Activity, Save, Heart, User } from 'react-feather'

render(
  <>
    <Button prefixIcon={<Activity />}>New Button</Button>
    <Button prefixIcon={<Activity />} suffixIcon={<Save />}>
      New Button
    </Button>
    <Button prefixIcon={<User />} suffixIcon={<Heart />}>
      New Button
    </Button>
  </>
)

import { Button } from '@avocado-ui/react'
import { Activity, Save, Heart, User } from 'react-feather'

render(
  <>
    <Button prefixIcon={<Activity />}>New Button</Button>
    <Button prefixIcon={<Activity />} suffixIcon={<Save />}>
      New Button
    </Button>
    <Button prefixIcon={<User />} suffixIcon={<Heart />}>
      New Button
    </Button>
  </>
)

Trimmed Text

Button texts can be unnecessarily long and you might want to trim them. You can do this by passing an int specifying the length of characters you want to show to the trim prop.

import { Button } from '@avocado-ui/react'
import { Activity, Save, Heart, User } from 'react-feather'

render(
  <>
    <Button trim={5}>New Button</Button>
    <Button trim={10}>New Button</Button>
    <Button trim={15}>New Button</Button>
  </>
)

import { Button } from '@avocado-ui/react'
import { Activity, Save, Heart, User } from 'react-feather'

render(
  <>
    <Button trim={5}>New Button</Button>
    <Button trim={10}>New Button</Button>
    <Button trim={15}>New Button</Button>
  </>
)

Loading Button

Loading Buttons shouldn't respond to user's actions anymore. avocado handles this by default. Set the Button to loading state with the loading prop.

import { Button } from '@avocado-ui/react'
import { Activity, Save, Heart, User } from 'react-feather'

render(
  <>
    <Button loading>New Button</Button>
  </>
)

import { Button } from '@avocado-ui/react'
import { Activity, Save, Heart, User } from 'react-feather'

render(
  <>
    <Button loading>New Button</Button>
  </>
)

Props Table

property	description	type	default
size	size of button	`sm`, `md`,`lg`	`md`
shape	shape of button	`round`, `curve`,`square`	`curve`
prefixIcon	Component by the left of the button	`none`
suffixIcon	Component by the right of the button	`none`
trim	trim text longer than a certain length	`number`
variant	variant of the button	`primary`, `secondary`, `warning`, `error`,
loading	set button state to loading	`boolean`	`false`
disabled	set button state to loading	`boolean`	`false`