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>

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

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

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

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

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

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

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

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

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

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

Button

Used to trigger an operation.

Sizes

Shapes

Prefix and Suffix

Sizes with Prefix and Suffix

Alignments

Types

Variant - Shadow

Variant - Ghost

Loading

Disabled

Custom Color

Other