Button

Used to trigger an operation.

Sizes

These sizes are standardized across form components.

Code Editor
<Container direction={['column', 'row', 'row']}>
<Container left>
<Button size="small">
Upload
</Button>
</Container>
<Container left>
<Button>
Upload
</Button>
</Container>
<Container left>
<Button size="large">
Upload
</Button>
</Container>
</Container>

Shapes

Code Editor
<Container direction={['column', 'row', 'row']}>
<Container left>
<Button size="small" shape="square">
<Up />
</Button>
</Container>
<Container left>
<Button shape="square">
<Up />
</Button>
</Container>
<Container left>
<Button size="large" shape="square">
<Up />
</Button>
</Container>
<Container left>
<Button size="small" shape="circle">
<Up />
</Button>
</Container>
<Container left>
<Button shape="circle">
<Up />
</Button>
</Container>
<Container left>
<Button size="large" shape="circle">
<Up />
</Button>
</Container>
</Container>

Prefix and Suffix

Code Editor
<Container direction={['column', 'row', 'row']}>
<Container left>
<Button prefix={<Up />}>
Upload
</Button>
</Container>
<Container left>
<Button suffix={<Up />}>
Upload
</Button>
</Container>
<Container left>
<Button
prefix={<Up />}
suffix={<Up />}
>
Upload
</Button>
</Container>
</Container>

Sizes with Prefix and Suffix

Code Editor
<Container direction={['column', 'row', 'row']}>
<Container left>
<Button size="small" prefix={<Up />}>
Upload
</Button>
</Container>
<Container left>
<Button suffix={<Up />}>
Upload
</Button>
</Container>
<Container left>
<Button
size="large"
prefix={<Up />}
suffix={<Up />}
>
Upload
</Button>
</Container>
</Container>

Alignments

Code Editor
<Container>
<Container>
<Button prefix={<Up />} align="start">
Upload
</Button>
</Container>
<Container>
<Button suffix={<Up />} align="start">
Upload
</Button>
</Container>
<Container>
<Button prefix={<Up />} align="grow">
Upload
</Button>
</Container>
<Container>
<Button prefix={<Up />} suffix={<Up />} align="grow">
Upload
</Button>
</Container>
<Container>
<Button prefix={<Up />} suffix={<Up />} align="start">
Upload
</Button>
</Container>
</Container>

Types

Code Editor
<Container direction={['column', 'row', 'row']}>
<Container left>
<Button type="secondary">
Upload
</Button>
</Container>
<Container left>
<Button type="success">
Upload
</Button>
</Container>
<Container left>
<Button type="error">
Upload
</Button>
</Container>
<Container left>
<Button type="warning">
Upload
</Button>
</Container>
<Container left>
<Button type="alert">
Upload
</Button>
</Container>
<Container left>
<Button type="violet">
Upload
</Button>
</Container>
</Container>

Variant - Shadow

Code Editor
<Container direction={['column', 'row', 'row']}>
<Container left>
<Button variant="shadow">
Upload
</Button>
</Container>
<Container left>
<Button type="secondary" variant="shadow">
Upload
</Button>
</Container>
<Container left>
<Button type="success" variant="shadow">
Upload
</Button>
</Container>
<Container left>
<Button type="error" variant="shadow">
Upload
</Button>
</Container>
<Container left>
<Button type="warning" variant="shadow">
Upload
</Button>
</Container>
<Container left>
<Button type="alert" variant="shadow">
Upload
</Button>
</Container>
<Container left>
<Button type="violet" variant="shadow">
Upload
</Button>
</Container>
</Container>

Variant - Ghost

Code Editor
<Container direction={['column', 'row', 'row']}>
<Container left>
<Button variant="ghost">
Upload
</Button>
</Container>
<Container left>
<Button type="secondary" variant="ghost">
Upload
</Button>
</Container>
<Container left>
<Button type="success" variant="ghost">
Upload
</Button>
</Container>
<Container left>
<Button type="error" variant="ghost">
Upload
</Button>
</Container>
<Container left>
<Button type="warning" variant="ghost">
Upload
</Button>
</Container>
<Container left>
<Button type="alert" variant="ghost">
Upload
</Button>
</Container>
<Container left>
<Button type="violet" variant="ghost">
Upload
</Button>
</Container>
</Container>

Loading

Code Editor
<Container direction={['column', 'row', 'row']}>
<Container left>
<Button loading prefix={<Up />} size="small">
Upload
</Button>
</Container>
<Container left>
<Button loading prefix={<Up />}>
Upload
</Button>
</Container>
<Container left>
<Button loading prefix={<Up />} size="large">
Upload
</Button>
</Container>
</Container>

Disabled

Code Editor
<Container direction={['column', 'row', 'row']}>
<Container left>
<Button disabled>
Upload
</Button>
</Container>
<Container left>
<Button disabled prefix={<Up />}>
Upload
</Button>
</Container>
<Container left>
<Button disabled prefix={<Up />} suffix={<Up />}>
Upload
</Button>
</Container>
</Container>

Custom Color

Other