Button

Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.

This component extends the Chakra UI Button

import { Button, ButtonGroup, IconButton } from '@chakra-ui/react';

import { Button, ButtonGroup, IconButton } from '@chakra-ui/react';

Button: The button component with support for custom icons, spinners, etc.
ButtonGroup: Used to group buttons whose actions are related, with an option to flush them together.

Button variants#

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

Shapes#

<Stack direction='row' spacing={4} align='center'>
    <Button>Rounded Button</Button>
    <Button variant='solid'>Semi Rounded</Button>
    <Button variant='solid-sharp'>Sharp Button</Button>
</Stack>

<Stack direction='row' spacing={4} align='center'>
    <Button>Rounded Button</Button>
    <Button variant='solid'>Semi Rounded</Button>
    <Button variant='solid-sharp'>Sharp Button</Button>
</Stack>

Editable Example

Solid Fill#

<Stack direction='row' spacing={4} align='center'>
    <Button>Run Payroll</Button>
    <Button colorScheme='hue-chrome'>Run Payroll</Button>
    <Button rightIcon={<BiTransfer />}>Run Payroll</Button>
    <Button colorScheme='hue-chrome' rightIcon={<BiTransfer />}>
        Run Payroll
    </Button>
    <IconButton icon={<BiTransfer />} isRound />
    <IconButton colorScheme='hue-chrome' icon={<BiTransfer />} isRound />
</Stack>

<Stack direction='row' spacing={4} align='center'>
    <Button>Run Payroll</Button>
    <Button colorScheme='hue-chrome'>Run Payroll</Button>
    <Button rightIcon={<BiTransfer />}>Run Payroll</Button>
    <Button colorScheme='hue-chrome' rightIcon={<BiTransfer />}>
        Run Payroll
    </Button>
    <IconButton icon={<BiTransfer />} isRound />
    <IconButton colorScheme='hue-chrome' icon={<BiTransfer />} isRound />
</Stack>

Editable Example

Outline#

<Stack direction='row' spacing={4} align='center'>
    <Button variant='outline-rounded'>Run Payroll</Button>
    <Button variant='outline-rounded' colorScheme='hue-chrome'>
        Run Payroll
    </Button>
    <Button variant='outline-rounded' rightIcon={<BiTransfer />}>
        Run Payroll
    </Button>
    <Button
        variant='outline-rounded'
        colorScheme='hue-chrome'
        rightIcon={<BiTransfer />}
    >
        Run Payroll
    </Button>
    <IconButton variant='outline' icon={<BiTransfer />} isRound />
    <IconButton
        variant='outline'
        colorScheme='hue-chrome'
        icon={<BiTransfer />}
        isRound
    />
</Stack>

<Stack direction='row' spacing={4} align='center'>
    <Button variant='outline-rounded'>Run Payroll</Button>
    <Button variant='outline-rounded' colorScheme='hue-chrome'>
        Run Payroll
    </Button>
    <Button variant='outline-rounded' rightIcon={<BiTransfer />}>
        Run Payroll
    </Button>
    <Button
        variant='outline-rounded'
        colorScheme='hue-chrome'
        rightIcon={<BiTransfer />}
    >
        Run Payroll
    </Button>
    <IconButton variant='outline' icon={<BiTransfer />} isRound />
    <IconButton
        variant='outline'
        colorScheme='hue-chrome'
        icon={<BiTransfer />}
        isRound
    />
</Stack>

Editable Example

States#

<Stack direction='row' spacing={4} align='center'>
    <Button>Normal Button</Button>
    <Button isDisabled>Disabled Button</Button>
    <Button isLoading colorScheme='hue-green' variant='solid'>
        Email
    </Button>
    <Button
        isLoading
        loadingText='Submitting Button'
        colorScheme='hue-green'
        variant='outline'
    >
        Submitting
    </Button>
</Stack>

<Stack direction='row' spacing={4} align='center'>
    <Button>Normal Button</Button>
    <Button isDisabled>Disabled Button</Button>
    <Button isLoading colorScheme='hue-green' variant='solid'>
        Email
    </Button>
    <Button
        isLoading
        loadingText='Submitting Button'
        colorScheme='hue-green'
        variant='outline'
    >
        Submitting
    </Button>
</Stack>

Editable Example

Grouping Buttons#

<Stack direction='row' spacing={4} align='center'>
    <ButtonGroup size='sm' isAttached variant='solid'>
        <Button mr='-px'>Save</Button>
        <IconButton
            aria-label='Add to friends'
            colorScheme='hue-chrome'
            icon={<AddIcon />}
        />
    </ButtonGroup>
    <ButtonGroup size='sm' isAttached variant='solid'>
        <Button mr='-px'>Label</Button>
        <Button mr='-px' colorScheme='hue-green' variant='outline'>
            Another Label
        </Button>
        <Button mr='-px' colorScheme='hue-green' variant='outline'>
            Label Ingine
        </Button>
    </ButtonGroup>
</Stack>

<Stack direction='row' spacing={4} align='center'>
    <ButtonGroup size='sm' isAttached variant='solid'>
        <Button mr='-px'>Save</Button>
        <IconButton
            aria-label='Add to friends'
            colorScheme='hue-chrome'
            icon={<AddIcon />}
        />
    </ButtonGroup>
    <ButtonGroup size='sm' isAttached variant='solid'>
        <Button mr='-px'>Label</Button>
        <Button mr='-px' colorScheme='hue-green' variant='outline'>
            Another Label
        </Button>
        <Button mr='-px' colorScheme='hue-green' variant='outline'>
            Label Ingine
        </Button>
    </ButtonGroup>
</Stack>

Editable Example

Props#

The Button extends the Chakra UI Button component so you can pass props for Button. These are props related to the Workpay Button component.

Name	Type	Default	Description
`variant`	`outline-rounded`, `solid-rounded`, `solid-sharp`	`solid-rounded`	The variant of the button style to use.
`isDisabled`	`boolean`		If `true`, the button will be disabled.
`isLoading`	`boolean`		If `true`, the button will show a spinner.
`size`	`xs`, `sm`, `md`, `lg`	`md`	The size of the button.

Button

.css-12m0k8p{pointer-events:auto;}Button variants.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66, 153, 225, 0.6);}#

Shapes#

Solid Fill#

Outline#

States#

Grouping Buttons#

Props#

Button variants#