@highlight-ui/alert NPM | npm.io

7.1.9 • Published 8 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

8 months ago

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

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

@highlight-ui/button @highlight-ui/icon @highlight-ui/layout @highlight-ui/tokens @highlight-ui/utils-commons @highlight-ui/utils-hooks @highlight-ui/utils-portal-manager

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 personio-componants @zalastax/nolb-_hig

8 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago