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 repository.

Install

This repository is distributed with npm. After installing 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.

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

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

Documentation

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.

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

Alert message goes here.

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

<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.

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.

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

Alert message goes here.

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

Alert message goes here.

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

Alert message goes here.

Variations

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

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

Full width alert

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

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

License

MIT © Thinkmill