Buttons communicate the action that will occur when the user clicks them. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. They contain a text label to describe the action, and an icon if appropriate.
Available variations:
Primary: used for the most important actions in any scenario. Don’t use more than one primary button in a section or screen to avoid overwhelming users
Muted: used for a secondary actions, the most commonly used button type
Negative: for destructive actions - when something can't be undone. For example, deleting entities
<Canvas ctx={ctx}><div style={{ marginBottom: 'var(--spacing-m)' }}><Button buttonType="muted">Submit</Button>{' '}<Button buttonType="primary">Submit</Button>{' '}<Button buttonType="negative">Submit</Button></div><div><Button buttonType="muted" disabled>Submit</Button>{' '}<Button buttonType="primary" disabled>Submit</Button>{' '}<Button buttonType="negative" disabled>Submit</Button></div></Canvas>
<Canvas ctx={ctx}><Button fullWidth>Submit</Button></Canvas>
<Canvas ctx={ctx}><Button buttonSize="xxs">Submit</Button>{' '}<Button buttonSize="xs">Submit</Button>{' '}<Button buttonSize="s">Submit</Button>{' '}<Button buttonSize="m">Submit</Button>{' '}<Button buttonSize="l">Submit</Button>{' '}<Button buttonSize="xl">Submit</Button>{' '}</Canvas>
<Canvas ctx={ctx}><div style={{ marginBottom: 'var(--spacing-m)' }}><Button leftIcon={<PlusIcon />}>Submit</Button></div><div style={{ marginBottom: 'var(--spacing-m)' }}><Button rightIcon={<ChevronDownIcon />}>Options</Button></div><div><Button leftIcon={<PlusIcon />} /></div></Canvas>