@elemental-ui-alpha/button v0.0.2

Button

import { Button } from '@elemental-ui-alpha/button';

Appearances

The Button component has a appearance property with three available values:

• strong (default)
• weak
• minimal

<Cluster gap="small">
  <Button appearance="strong">Strong</Button>
  <Button appearance="weak">Weak</Button>
  <Button appearance="minimal">Minimal</Button>
</Cluster>

Tone

The Button component has a tone property with three available values:

• neutral
• action (default)
• positive
• critical

<Stack gap="small">
  <Cluster gap="small">
    <Button appearance="strong" tone="neutral">
      Neutral
    </Button>
    <Button appearance="strong" tone="action">
      Action
    </Button>
    <Button appearance="strong" tone="positive">
      Positive
    </Button>
    <Button appearance="strong" tone="critical">
      Critical
    </Button>
  </Cluster>
  <Cluster gap="small">
    <Button appearance="weak" tone="neutral">
      Neutral
    </Button>
    <Button appearance="weak" tone="action">
      Action
    </Button>
    <Button appearance="weak" tone="positive">
      Positive
    </Button>
    <Button appearance="weak" tone="critical">
      Critical
    </Button>
  </Cluster>
  <Cluster gap="small">
    <Button appearance="minimal" tone="neutral">
      Neutral
    </Button>
    <Button appearance="minimal" tone="action">
      Action
    </Button>
    <Button appearance="minimal" tone="positive">
      Positive
    </Button>
    <Button appearance="minimal" tone="critical">
      Critical
    </Button>
  </Cluster>
</Stack>

Miscellaneous

Disabled

When disabled the button will not by interactive to the user.

<Cluster gap="small">
  <Button disabled>Strong</Button>
  <Button disabled appearance="weak">
    Weak
  </Button>
  <Button disabled appearance="minimal">
    Minimal
  </Button>
</Cluster>

Pending

Note that buttons will be disabled whilst pending.

let [pending, setPending] = React.useState(true);

return (
  <Stack gap="large">
    <Checkbox onChange={e => setPending(e.target.checked)} checked={pending}>
      Toggle pending
    </Checkbox>
    <Cluster gap="small">
      <Button pending={pending}>Strong: pending</Button>
      <Button pending={pending} appearance="weak">
        Weak: pending
      </Button>
      <Button pending={pending} appearance="minimal">
        Minimal: pending
      </Button>
    </Cluster>
  </Stack>
);