7.1.6 • Published 2 months ago

@highlight-ui/alert v7.1.6

Weekly downloads
-
License
MIT
Repository
-
Last release
2 months ago

npm personio.design storybook.personio.design

@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 📜

PropTypeRequiredDefaultDescription
status'highlight', 'success', 'warning', 'critical'YesDefines which variant of the Alert to render
idstringNoGives the alert an id
actionsReact.ReactNodeNoAllows rendering a ReactNode (a button is intended) below the alert content
enableCloseButtonbooleanNofalseAllows showing a close button
fullWidthbooleanNofalseIf true, uses 100% of its container width
iconColorIconColorTokenNoPasses a color to the icon
iconFamily'regular', 'light', 'solid'NosolidPasses a font family to the icon
iconSizenumberNo16Passes a size to the icon
iconNamestringNoPasses an icon name to the icon
onClickCloseButton() => voidNoPasses a function to onClick() of the close button

Custom types 🔠

TypeValuesDescription
IconColorToken"Icon" and "Icon On" color token namesA 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-395personio-componants@zalastax/nolb-_hig
7.1.6

2 months ago

7.1.5

3 months ago

7.1.4

5 months ago

7.1.3

5 months ago

7.0.8

10 months ago

7.0.7

10 months ago

7.0.6

10 months ago

7.0.5

10 months ago

7.0.9

10 months ago

7.0.0

10 months ago

7.0.4

10 months ago

7.0.3

10 months ago

7.0.2

10 months ago

7.0.1

10 months ago

7.0.12

9 months ago

7.0.13

9 months ago

7.0.10

10 months ago

7.0.11

10 months ago

7.0.18

9 months ago

7.0.19

8 months ago

7.0.16

9 months ago

7.0.17

9 months ago

7.0.14

9 months ago

7.0.15

9 months ago

7.0.23

8 months ago

7.0.24

7 months ago

7.0.21

8 months ago

7.0.22

8 months ago

7.0.20

8 months ago

7.0.27

7 months ago

7.1.2

7 months ago

7.1.1

7 months ago

7.0.25

7 months ago

7.1.0

7 months ago

7.0.26

7 months ago

7.1.0-r18.0

8 months ago

6.0.4

10 months ago

5.6.19

12 months ago

5.6.18

12 months ago

5.6.17

12 months ago

6.0.1

11 months ago

6.0.0

11 months ago

6.0.3

11 months ago

6.0.2

11 months ago

5.6.20

12 months ago

5.6.15

1 year ago

5.6.14

1 year ago

5.6.16

1 year ago

5.6.13

1 year ago

5.6.12

1 year ago

5.3.3

1 year ago

5.3.2

1 year ago

5.3.1

1 year ago

5.3.0

1 year ago

5.6.11

1 year ago

5.6.10

1 year ago

5.4.8

1 year ago

5.4.7

1 year ago

5.4.6

1 year ago

5.4.5

1 year ago

5.4.4

1 year ago

5.4.3

1 year ago

5.4.2

1 year ago

5.4.1

1 year ago

5.4.0

1 year ago

5.5.2

1 year ago

5.5.1

1 year ago

5.5.0

1 year ago

5.6.9

1 year ago

5.6.8

1 year ago

5.6.7

1 year ago

5.6.6

1 year ago

5.6.5

1 year ago

5.6.4

1 year ago

5.6.3

1 year ago

5.6.2

1 year ago

5.2.6

1 year ago

5.6.1

1 year ago

5.2.5

1 year ago

5.6.0

1 year ago

5.2.4

1 year ago

5.2.3

1 year ago

5.2.2

1 year ago

5.2.1

1 year ago

5.2.0

1 year ago

5.1.28

1 year ago

5.3.4

1 year ago

5.1.26

2 years ago

5.1.24

2 years ago

5.1.23

2 years ago

5.1.22

2 years ago

5.1.21

2 years ago

5.1.20

2 years ago

5.1.19

2 years ago

5.1.18

2 years ago

5.1.17

2 years ago

5.1.16

2 years ago

5.1.15

2 years ago

5.1.14

2 years ago

5.1.13

2 years ago

5.1.5

2 years ago

5.1.4

2 years ago

5.1.3

2 years ago

5.1.2

2 years ago

5.1.1

2 years ago

5.1.0

2 years ago

5.0.0-alpha.1

2 years ago

5.0.2

2 years ago

5.0.1

2 years ago

5.0.0

2 years ago

5.1.12

2 years ago

5.1.11

2 years ago

5.1.10

2 years ago

5.1.9

2 years ago

5.1.8

2 years ago

5.1.6

2 years ago

5.0.0-alpha.0

2 years ago

4.0.5

2 years ago

4.0.4

2 years ago

4.0.6

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

4.0.3

2 years ago

4.0.2

2 years ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.5

2 years ago

3.0.0

3 years ago

2.0.24

3 years ago

2.0.25

3 years ago

2.0.22

3 years ago

2.0.23

3 years ago

2.0.20

3 years ago

2.0.21

3 years ago

2.0.19

3 years ago

2.0.17

3 years ago

2.0.18

3 years ago

2.0.16

3 years ago

2.0.15

3 years ago

2.0.14

3 years ago

2.0.13

3 years ago

2.0.12

3 years ago

2.0.11

3 years ago

2.0.9

3 years ago

2.0.10

3 years ago

2.0.8

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

2.0.0

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago