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