button

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, or canceling an action.

Import

import { Button } from '@xpanseinc/nebula'

Usage

Primary

<HStack spacing={16}>
  <Button variant="primary">
    Button
  </Button>

  <Button variant="primary" disabled>
    Button
  </Button>
</HStack>

Outline

<HStack spacing={16}>
  <Button variant="outline">
    Button
  </Button>

  <Button variant="outline" disabled>
    Button
  </Button>
</HStack>

Ghost

<HStack spacing={16}>
  <Button variant="ghost">
    Button
  </Button>

  <Button variant="ghost" disabled>
    Button
  </Button>
</HStack>

Solid

<HStack spacing={16}>
  <Button variant="solid">
    Button
  </Button>

  <Button variant="solid" disabled>
    Button
  </Button>
</HStack>

Destruct

<HStack spacing={16}>
  <Button variant="destruct">
    Button
  </Button>

  <Button variant="destruct" disabled>
    Button
  </Button>
</HStack>

Button Sizes

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

<HStack spacing={16}>
  <Button size="xs">
    Button
  </Button>

  <Button size="sm">
    Button
  </Button>

  <Button size="md">
    Button
  </Button>
</HStack>

Full Width

<Button fullWidth>
  Hello!
</Button>

Button with icon

<HStack spacing={16}>
  <Button leftIcon={<PlusIcon />}>
    Button
  </Button>

  <Button rightIcon={<ChevronDownIcon />}>
    Button
  </Button>
</HStack>

Button with loading indicator

Pass isLoading to show a loading state. By default, the button will maintain its initial size. Pass loadingText to display a loading specific label.

<LoadingButtons>
  {(isLoading) => (
    <HStack spacing={16}>
      <Button isLoading={isLoading}>Save</Button>
      <Button isLoading={isLoading} loadingText="Un momento…">
        Send
      </Button>
    </HStack>
    )}
</LoadingButtons>