npm package: @highlight-ui/alert
Description: This is the Alert component used in Personio
Author: Personio GmbH & Co. KG
Latest version: 7.1.12

[![npm](https://img.shields.io/npm/v/@highlight-ui/alert)](https://www.npmjs.com/package/@highlight-ui/alert)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/88a410-alerts/b/26fe12)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-alert--basic-alert)

# @highlight-ui/alert

Using npm:

```bash
npm install @highlight-ui/alert
```

Using yarn:

```bash
yarn add @highlight-ui/alert
```

Using pnpm:

```bash
pnpm install @highlight-ui/alert
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/alert');
```

Once the package is installed, you can import the library:

```ts
import { Alert, InlineAlert } from '@highlight-ui/alert';
```

## Usage

```tsx
import React, { useState } from 'react';
import { Alert } from '@highlight-ui/alert';

export default function AlertExample() {
  return <Alert status="highlight">This is an alert!</Alert>;
}
```

⚠️⚠️⚠️⚠️ As of version `7.0.0` on both Alert and InlineAlert the pre-defined typographic style on children are removed. ⚠️⚠️⚠️⚠️
so for the component to work properly use next suggestion as an example
In your (S)CSS file:

```scss
@import url('@highlight-ui/alert');
@import url('@highlight-ui/typography');
```

In your TS(X) file:

```tsx
import React, { useState } from 'react';
import { Body } from '@highlight-ui/typography';
import { Alert } from '@highlight-ui/alert';

export default function AlertExample() {
  return (
    <Alert status="highlight">
      <Body color="text-default">This is an alert!</Body>
    </Alert>
  );
}
```

## Props 📜

| Prop                 | Type                                            | Required | Default | Description                                                                 |
| :------------------- | :---------------------------------------------- | :------- | :------ | :-------------------------------------------------------------------------- |
| `status`             | `'highlight', 'success', 'warning', 'critical'` | Yes      |         | Defines which variant of the Alert to render                                |
| `id`                 | `string`                                        | No       |         | Gives the alert an id                                                       |
| `actions`            | `React.ReactNode`                               | No       |         | Allows rendering a ReactNode (a button is intended) below the alert content |
| `enableCloseButton`  | `boolean`                                       | No       | `false` | Allows showing a close button                                               |
| `fullWidth`          | `boolean`                                       | No       | `false` | If true, uses `100%` of its container width                                 |
| `iconColor`          | `IconColorToken`                                | No       |         | Passes a color to the icon                                                  |
| `iconFamily`         | `'regular', 'light', 'solid'`                   | No       | `solid` | Passes a font family to the icon                                            |
| `iconSize`           | `number`                                        | No       | `16`    | Passes a size to the icon                                                   |
| `iconName`           | `string`                                        | No       |         | Passes an icon name to the icon                                             |
| `onClickCloseButton` | `() => void`                                    | No       |         | Passes a function to onClick() of the close button                          |

### Custom types 🔠

| Type             | Values                                                                                                                                                                       | Description                                         |
| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------- |
| `IconColorToken` | ["Icon"](https://www.personio.design/40d648a47/p/489790-colours/t/215ba4) and ["Icon On"](https://www.personio.design/40d648a47/p/489790-colours/t/77d4a6) color token names | A type exported by the `@highlight-ui/icon` package |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/88a410-alerts/b/26fe12) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).