# @arch-ui/alert

> Alert component as used in @keystonejs Admin UI.

Latest version **0.0.21** (published 2021-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @arch-ui/alert
pnpm add @arch-ui/alert
yarn add @arch-ui/alert
bun add @arch-ui/alert
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.21 |
| Published | 2021-05-26 |
| First published | 2019-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 67 |
| Author | Jed Watson |
| Maintainers | bladey, jedwatson, jossmac, mitchellhamilton, noviny, jesstelford, molomby, timl, madebymike |

## Links

- npm: https://www.npmjs.com/package/@arch-ui/alert
- Repository: https://github.com/keystonejs/keystone-5/tree/main/packages/arch/packages/alert
- npm.io page: https://npm.io/package/@arch-ui/alert

## Dependencies (3)

- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.1.1
- [@arch-ui/theme](https://npm.io/package/@arch-ui/theme.md) ^0.0.14
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^10.0.27

## Recent versions

- 0.0.21 (latest) — 2021-05-26
- 0.0.18 (parapet) — 2020-08-30
- 0.0.20 — 2021-04-14
- 0.0.19 — 2021-02-22
- 0.0.17 — 2020-04-23
- 0.0.16 — 2020-04-06
- 0.0.15 — 2020-03-16
- 0.0.14 — 2020-03-08
- 0.0.13 — 2020-02-27
- 0.0.12 — 2020-01-06
- 0.0.11 — 2019-12-12
- 0.0.10 — 2019-12-11
- 0.0.9 — 2019-12-09
- 0.0.8 — 2019-11-06
- 0.0.7 — 2019-07-19
- … 6 more at https://npm.io/package/@arch-ui/alert/versions

## README

<!--[meta]
section: misc
title: Alert
[meta]-->

import { Alert } from './src';

# Arch Alert

#### TODO

- npm version
- build status

> Alert messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.

This repository is a module of the full [arch-ui][source] repository.

## Install

This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `@arch-ui/alert` with this command.

```
npm install --save @arch-ui/alert

# OR

yarn add @arch-ui/alert
```

## Usage

Import the component into your application.

```jsx
import { Alert } from '@arch-ui/alert';
```

To override the styles use the [`@arch-ui/theme` package][theme].

## Documentation

<!-- %docs -->

Alert messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.

## Default

Alert messages start off looking decently neutral—they're just light blue rounded rectangles.

```jsx
<Alert>Alert message goes here.</Alert>
```

<Alert>Alert message goes here.</Alert>

You can put multiple paragraphs of text in an alert—the last paragraph's bottom `margin` will be automatically override.

```jsx
<Alert>
  <p>
    This is a longer alert in its own paragraph. It ends up looking something like this. If we keep
    adding more text, it'll eventually wrap to a new line.
  </p>
  <p>And this is another paragraph.</p>
</Alert>
```

<Alert>
  <p>
    This is a longer alert in its own paragraph. It ends up looking something like this. If we keep
    adding more text, it'll eventually wrap to a new line.
  </p>
  <p>And this is another paragraph.</p>
</Alert>

Should the need arise, you can quickly space out your alert from surrounding content with an `AlertGroup` wrapper. _Note the extra top and bottom margin in the example below._

```jsx
import { Alert, AlertGroup } from '@arch-ui/alert';

<AlertGroup>
  <Alert>Alert message goes here.</Alert>
  <Alert>Alert message goes here.</Alert>
</AlertGroup>;
```

## Appearances

info
success
warning
danger

Add the appearance property `warning`, `danger`, or `success` to the alert to make it yellow, red, or green, respectively.

```jsx
<Alert appearance="warning">Alert message goes here.</Alert>
```

<Alert appearance="warning">Alert message goes here.</Alert>

```jsx
<Alert appearance="danger">Alert message goes here.</Alert>
```

<Alert appearance="danger">Alert message goes here.</Alert>

```jsx
<Alert appearance="success">Alert message goes here.</Alert>
```

<Alert appearance="success">Alert message goes here.</Alert>

## Variations

Alerts default to a `subtle` variant, but if you need to pack more punch, add the variant property `bold`.

```jsx
<Alert appearance="danger" variant="bold">
  Alert message goes here.
</Alert>
```

<Alert appearance="danger" variant="bold">
  Alert message goes here.
</Alert>

## Full width alert

An alert that is full width; removes border and border radius.

```jsx
<Alert isFullWidth>
  <Container>Full width alert.</Container>
</Alert>
```

<!-- %proptypes -->

<!-- %enddocs -->

## License

MIT © [Thinkmill](https://www.thinkmill.com.au/)

[source]: https://github.com/keystonejs/keystone-5/tree/main/packages/arch

[npm]: https://www.npmjs.com/package/@arch-ui/alert

[install-npm]: https://docs.npmjs.com/getting-started/installing-node

[theme]: http://npmjs.com/package/@arch-ui/theme

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