Package Exports

@neoauto-ui/button
@neoauto-ui/button/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@neoauto-ui/button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>