5.0.1 • Published 4 months ago

@spark-web/alert v5.0.1

Weekly downloads
-
License
-
Repository
github
Last release
4 months ago

title: Alert storybookPath: feedback-overlays-alert--info

isExperimentalPackage: true

Alert displays a short and concise message to draw a users' attention without interrupting their current task.

Examples

Tones

The component offers several levels of tonal severity.

<Stack gap="large">
  <Alert tone="caution" heading="This is a caution alert">
    Caution message
  </Alert>
  <Alert tone="positive" heading="This is a positive alert">
    Positive message
  </Alert>
  <Alert tone="info" heading="This is an info alert">
    Info message
  </Alert>
  <Alert tone="critical" heading="This is a critical alert">
    Critical message
  </Alert>
</Stack>

Closing

You can also set an onClose prop callback function which will render a close icon button on the alert. The callback function will be called upon the button being pressed.

const [isOpen, setIsOpen] = React.useState(true);

React.useEffect(() => {
  const timeout = setTimeout(() => {
    if (!isOpen) {
      setIsOpen(true);
    }
  }, 2000);

  return () => clearTimeout(timeout);
}, [isOpen]);

if (!isOpen) {
  return null;
}

return (
  <Alert
    tone="caution"
    heading="This is a caution alert"
    onClose={() => setIsOpen(false)}
  >
    Click the button on the right to dismiss this notification
  </Alert>
);

Custom icons

In rare cases, you may need to provide a custom icon. To do so, we expose an icon prop. You can pass it any icon from the Icon package.

<Alert heading="This an info alert" icon={LightBulbIcon}>
  Did you know that Alert components can have custom icons?
</Alert>

Props

3.0.0-rc.20

6 months ago

3.0.0-rc.21

6 months ago

5.0.1

4 months ago

5.0.0

5 months ago

5.0.0-rc.24

6 months ago

5.0.0-rc.25

5 months ago

5.0.0-rc.26

5 months ago

5.0.0-rc.27

5 months ago

5.0.0-rc.28

5 months ago

5.0.0-rc.29

5 months ago

3.0.0-rc.13

7 months ago

3.0.0-rc.12

7 months ago

3.0.0-rc.15

7 months ago

3.0.0-rc.14

7 months ago

3.0.0-rc.17

7 months ago

3.0.0-rc.16

7 months ago

3.0.0-rc.19

7 months ago

5.0.0-rc.31

5 months ago

3.0.0-rc.18

7 months ago

3.0.0-rc.2

7 months ago

3.0.0-rc.1

7 months ago

3.0.0-rc.0

7 months ago

3.0.0-rc.6

7 months ago

3.0.0-rc.5

7 months ago

3.0.0-rc.11

7 months ago

3.0.0-rc.4

7 months ago

3.0.0-rc.10

7 months ago

3.0.0-rc.3

7 months ago

3.0.0-rc.9

7 months ago

3.0.0-rc.8

7 months ago

3.0.0-rc.7

7 months ago

2.3.1

1 year ago

2.3.0

1 year ago

2.2.1

3 years ago

2.2.0

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

1.0.7

3 years ago

2.1.0

3 years ago

2.0.0

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago