Plugin SDK

Button

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

Button types

1
<Canvas ctx={ctx}>
2
  <div style={{ marginBottom: 'var(--spacing-m)' }}>
3
    <Button buttonType="muted">Submit</Button>{' '}
4
    <Button buttonType="primary">Submit</Button>{' '}
5
    <Button buttonType="negative">Submit</Button>
6
  </div>
7
  <div>
8
    <Button buttonType="muted" disabled>
9
      Submit
10
    </Button>{' '}
11
    <Button buttonType="primary" disabled>
12
      Submit
13
    </Button>{' '}
14
    <Button buttonType="negative" disabled>
15
      Submit
16
    </Button>
17
  </div>
18
</Canvas>

Full-width

1
<Canvas ctx={ctx}>
2
  <Button fullWidth>Submit</Button>
3
</Canvas>

Sizing

1
<Canvas ctx={ctx}>
2
  <Button buttonSize="xxs">Submit</Button>{' '}
3
  <Button buttonSize="xs">Submit</Button>{' '}
4
  <Button buttonSize="s">Submit</Button>{' '}
5
  <Button buttonSize="m">Submit</Button>{' '}
6
  <Button buttonSize="l">Submit</Button>{' '}
7
  <Button buttonSize="xl">Submit</Button>{' '}
8
</Canvas>

Icons

1
<Canvas ctx={ctx}>
2
  <div style={{ marginBottom: 'var(--spacing-m)' }}>
3
    <Button leftIcon={<PlusIcon />}>Submit</Button>
4
  </div>
5
  <div style={{ marginBottom: 'var(--spacing-m)' }}>
6
    <Button rightIcon={<ChevronDownIcon />}>Options</Button>
7
  </div>
8
  <div>
9
    <Button leftIcon={<PlusIcon />} />
10
  </div>
11
</Canvas>