Button

Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

Installation

1yarn add @teste-ui/button
2
3# or
4
5npm i @teste-ui/button

Import component

1import { Button } from "@teste-ui/button"

Usage

1<Button colorScheme="green">Button</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.

1<Stack>
2  <Button size="xs">Button</Button>
3  <Button size="sm">Button</Button>
4  <Button size="md">Button</Button>
5  <Button size="lg">Button</Button>
6</Stack>

Button Variant

Use the variant prop to change the visual style of the Button. You can set the value to solid, ghost, outline, or link.

1<ButtonGroup>
2  <Button variant="solid">Button</Button>
3  <Button variant="outline">Button</Button>
4  <Button variant="ghost">Button</Button>
5  <Button variant="link">Button</Button>
6</ButtonGroup>

Button with Icon

You can add left and right icons to the Button components.

1<ButtonGroup>
2  <Button leftIcon={<EmailIcon />} variant="solid">
3    Email
4  </Button>
5  <Button rightIcon={<ArrowForwardIcon />} variant="outline">
6    Call us
7  </Button>
8</ButtonGroup>

Button loading state

Pass isLoading prop to the Button component to show its loading state. You can optionally pass loadingText prop.

You can also use a custom spinner to render your own spinner component.

1<Stack>
2  <Button isLoading colorScheme="teal" variant="solid">
3    Email
4  </Button>
5
6  <Button
7    isLoading
8    colorScheme="teal"
9    variant="outline"
10    spinner={<BarSpinner />}
11  >
12    Submit
13  </Button>
14</Stack>