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><Buttonprefix={<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><Buttonsize="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>