Button

Buttons allow users to perform an action.

Import

tsx
import { Button } from "@hope-ui/core";

tsx
import { Button } from "@hope-ui/core";

Usage

tsx
<Button>Button</Button>

tsx
<Button>Button</Button>

Variants

Use the variant prop to change the visual style of the Button.

tsx
<HStack spacing={4}>
  <Button variant="default">Button</Button>
  <Button variant="solid">Button</Button>
  <Button variant="soft">Button</Button>
  <Button variant="outlined">Button</Button>
  <Button variant="plain">Button</Button>
</HStack>

tsx
<HStack spacing={4}>
  <Button variant="default">Button</Button>
  <Button variant="solid">Button</Button>
  <Button variant="soft">Button</Button>
  <Button variant="outlined">Button</Button>
  <Button variant="plain">Button</Button>
</HStack>

Colors

The colorScheme prop allows changing the color of the Button.

tsx
<HStack spacing={4}>
  <Button variant="solid" colorScheme="primary">
    Button
  </Button>
  <Button variant="solid" colorScheme="neutral">
    Button
  </Button>
  <Button variant="solid" colorScheme="success">
    Button
  </Button>
  <Button variant="solid" colorScheme="info">
    Button
  </Button>
  <Button variant="solid" colorScheme="warning">
    Button
  </Button>
  <Button variant="solid" colorScheme="danger">
    Button
  </Button>
</HStack>

tsx
<HStack spacing={4}>
  <Button variant="solid" colorScheme="primary">
    Button
  </Button>
  <Button variant="solid" colorScheme="neutral">
    Button
  </Button>
  <Button variant="solid" colorScheme="success">
    Button
  </Button>
  <Button variant="solid" colorScheme="info">
    Button
  </Button>
  <Button variant="solid" colorScheme="warning">
    Button
  </Button>
  <Button variant="solid" colorScheme="danger">
    Button
  </Button>
</HStack>

Sizes

Use the size prop to change the size of the Button.

tsx
<HStack spacing={4}>
  <Button size="xs">Button</Button>
  <Button size="sm">Button</Button>
  <Button size="md">Button</Button>
  <Button size="lg">Button</Button>
</HStack>

tsx
<HStack spacing={4}>
  <Button size="xs">Button</Button>
  <Button size="sm">Button</Button>
  <Button size="md">Button</Button>
  <Button size="lg">Button</Button>
</HStack>

Button with icon

The leftIcon and rightIcon props allows to add left and right icons to the Button.

tsx
<HStack spacing={4}>
  <Button leftIcon={<CopyIcon boxSize={18} />}>Copy to clipboard</Button>
  <Button rightIcon={<ArrowRightIcon />}>Next</Button>
</HStack>

tsx
<HStack spacing={4}>
  <Button leftIcon={<CopyIcon boxSize={18} />}>Copy to clipboard</Button>
  <Button rightIcon={<ArrowRightIcon />}>Next</Button>
</HStack>

If you want to create your own icon components check out Hope UI Icon documentation.

Loading state

Pass the isLoading prop to show its loading state. By default, the button will show a spinner and leave the button's width unchanged. You can also pass the loadingText prop to show a spinner and the loading text.

tsx
<HStack spacing={4}>
  <Button isLoading>Loading</Button>
  <Button isLoading loadingText="Processing">
    Save
  </Button>
</HStack>

tsx
<HStack spacing={4}>
  <Button isLoading>Loading</Button>
  <Button isLoading loadingText="Processing">
    Save
  </Button>
</HStack>

You can also change the loader element with the loader prop.

tsx
<Button isLoading loader={<BeatLoaderIcon boxSize={8} />}>
  Button
</Button>

tsx
<Button isLoading loader={<BeatLoaderIcon boxSize={8} />}>
  Button
</Button>

When a loaderText is present, you can change the placement of the loader element to either startorend.

tsx
<HStack spacing={4}>
  <Button isLoading loadingText="Loading" loaderPlacement="start">
    Save
  </Button>
  <Button isLoading loadingText="Loading" loaderPlacement="end">
    Continue
  </Button>
</HStack>

tsx
<HStack spacing={4}>
  <Button isLoading loadingText="Loading" loaderPlacement="start">
    Save
  </Button>
  <Button isLoading loadingText="Loading" loaderPlacement="end">
    Continue
  </Button>
</HStack>

Grouping buttons

You can use the ButtonGroup component to group buttons which allows to:

• Set the variant, colorScheme, size and isDisabled state of all buttons within it.
• Flush the buttons together by removing the border radius of its children as needed.
• Supports horizontal and vertical stacking.

tsx
<ButtonGroup size="sm" variant="outlined">
  <Button>Save</Button>
  <IconButton aria-label="Create new file">
    <PlusIcon />
  </IconButton>
</ButtonGroup>

tsx
<ButtonGroup size="sm" variant="outlined">
  <Button>Save</Button>
  <IconButton aria-label="Create new file">
    <PlusIcon />
  </IconButton>
</ButtonGroup>

Use the orientation prop to change the orientation of the group.

tsx
<ButtonGroup orientation="vertical">
  <Button>First</Button>
  <Button>Second</Button>
  <Button>Third</Button>
</ButtonGroup>

tsx
<ButtonGroup orientation="vertical">
  <Button>First</Button>
  <Button>Second</Button>
  <Button>Third</Button>
</ButtonGroup>

Theming

Use the ButtonTheme type to override Button styles and default props when extending Hope UI theme.

tsx
import { extendTheme, ButtonTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    Button: {
      // ...overrides
    } as ButtonTheme,
  },
});

tsx
import { extendTheme, ButtonTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    Button: {
      // ...overrides
    } as ButtonTheme,
  },
});

Component parts

Props

Button

ButtonGroup