Button

Buttons are used as triggers for actions.

Installation

yarn add @neoauto-ui/button

Import

import { Button } from '@neoauto-ui/button';

Basic Usage

<Button>Vende tu vehículo</Button>

Button sizes

Use the size prop to change the size of the button. You can set the value to xs, sm, md, or lg.

<Button size="xs">Height 32</Button>
<Button size="sm">Height 36</Button>
<Button size="md">Height 44</Button>
<Button size="lg">Height 56</Button>

Button variants

Use the variant prop to change the visual style of the Button. You can set the value to filled, outline or skew.

<Button variant="filled">Vende tu vehículo</Button>
<Button variant="outline">Ver más autos del concesionario</Button>
<Button variant="skew">VER DATOS</Button>

Button loading state

Pass the isLoading prop to show its loading state.

You can also pass the loadingText prop to show a spinner and the loading text.

<Button isLoading>Button</Button>
<Button isLoading loadingText="Cargando...">Button</Button>

Button disabled state

Pass the isDisabled prop to disabled button action.

<Button isDisabled>Button</Button>

Custom Button

It provides the hover, focus, bg, color style props to style the button.

<Button
  bg="linear-gradient(90deg, #F65800 2.08%, #FA9300 100%)"
  _hover={{ bg: '#F65800' }}
  _focus={{ bg: '#DD4F00' }}>
  Vende tu vehículo
</Button>
<Button
  variant="skew"
  bg="linear-gradient(90deg, #F65800 2.08%, #FA9300 100%)"
  _hover={{ bg: '#F65800' }}
  _focus={{ bg: '#DD4F00' }}>
  VER DATOS
</Button>
<Button
  variant="skew"
  bg="#25D366"
  _hover={{ bg: '#21BE5C' }}
  _focus={{ bg: '#1EA952' }}>
  WHATSAPP
</Button>

Button display

To take full width of the parent element, use fullWidth prop.

<Button isFullWidth>Button</Button>