# @elemental-ui-alpha/button

> Buttons are used to trigger actions based on a user's interaction.

Latest version **0.0.2** (published 2020-04-24) · 0 weekly downloads

## Install

```sh
npm install @elemental-ui-alpha/button
pnpm add @elemental-ui-alpha/button
yarn add @elemental-ui-alpha/button
bun add @elemental-ui-alpha/button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-04-24 |
| First published | 2020-04-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 26.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dsf-release-bot, mitchellhamilton |

## Links

- npm: https://www.npmjs.com/package/@elemental-ui-alpha/button
- npm.io page: https://npm.io/package/@elemental-ui-alpha/button

## Dependencies (6)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.8.3
- [@elemental-ui-alpha/box](https://npm.io/package/@elemental-ui-alpha/box.md) ^0.0.2
- [@elemental-ui-alpha/core](https://npm.io/package/@elemental-ui-alpha/core.md) ^0.0.2
- [@elemental-ui-alpha/theme](https://npm.io/package/@elemental-ui-alpha/theme.md) ^0.0.0
- [@elemental-ui-alpha/utils](https://npm.io/package/@elemental-ui-alpha/utils.md) ^0.0.2
- [@elemental-ui-alpha/loading](https://npm.io/package/@elemental-ui-alpha/loading.md) ^0.0.2

## Recent versions

- 0.0.2 (latest) — 2020-04-24
- 0.0.1 — 2020-04-23
- 0.0.0 — 2020-04-23

## README

# Button

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

## Appearances

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

- `strong` (default)
- `weak`
- `minimal`

```jsx live
<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`

```jsx live
<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.

```jsx live
<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.

```jsx live
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>
);
```

---
_Source: https://npm.io/package/@elemental-ui-alpha/button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._