@highlight-ui/alert
v7.1.11
Published
This is the Alert component used in Personio
Downloads
6,146
Maintainers
riain-personio
yunxi-yang
andresfrompersonio
kbpersonio
jordan-personio
amadeofrompersonio
cusero
mislav_lukac_personio_ext
ante.zebic
personio-npm-ciKeywords
Readme
@highlight-ui/alert
Using npm:
npm install @highlight-ui/alertUsing yarn:
yarn add @highlight-ui/alertUsing pnpm:
pnpm install @highlight-ui/alertIn your (S)CSS file:
@import url('@highlight-ui/alert');Once the package is installed, you can import the library:
import { Alert, InlineAlert } from '@highlight-ui/alert';Usage
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:
@import url('@highlight-ui/alert');
@import url('@highlight-ui/typography');In your TS(X) file:
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" and "Icon On" color token names | A type exported by the @highlight-ui/icon package |
Contributing 🖌️
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.