@highlight-ui/alert

@highlight-ui/alert

Using npm:

npm install @highlight-ui/alert

Using yarn:

yarn add @highlight-ui/alert

Using pnpm:

pnpm install @highlight-ui/alert

In 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>;
}

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.