JSPM

@chakra-ui/button

0.0.0-dev-20220813051625
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 436695
  • Score
    100M100P100Q183348F
  • License MIT

A React component that is a base button.

Package Exports

    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 (@chakra-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. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

    Installation

    yarn add @chakra-ui/button
    
    # or
    
    npm i @chakra-ui/button

    Import component

    import { Button } from "@chakra-ui/button"

    Usage

    <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.

    <Stack>
      <Button size="xs">Button</Button>
      <Button size="sm">Button</Button>
      <Button size="md">Button</Button>
      <Button size="lg">Button</Button>
    </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.

    <ButtonGroup>
      <Button variant="solid">Button</Button>
      <Button variant="outline">Button</Button>
      <Button variant="ghost">Button</Button>
      <Button variant="link">Button</Button>
    </ButtonGroup>

    Button with Icon

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

    <ButtonGroup>
      <Button leftIcon={<EmailIcon />} variant="solid">
        Email
      </Button>
      <Button rightIcon={<ArrowForwardIcon />} variant="outline">
        Call us
      </Button>
    </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.

    <Stack>
      <Button isLoading colorScheme="teal" variant="solid">
        Email
      </Button>
    
      <Button
        isLoading
        colorScheme="teal"
        variant="outline"
        spinner={<BarSpinner />}
      >
        Submit
      </Button>
    </Stack>