Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide
DocumentationAtomsAlert

Alert

This component shows high priority messages, they’re meant to be noticed & prompt users

Basic Usage

import { Alert } from '@krakentech/coral';
 
<Alert onClose={...}>
    <Typography color="inherit" textStyle="h5">
        Alert content
    </Typography>
</Alert>

Properties

icon

<Alert inline severity="info" icon={<IconSecure color="currentColor" />}>
    <Typography color="inherit" textStyle="h5">
        Secure connection
    </Typography>
</Alert>

Alternatively, you can set the icon prop to false to hide the icon.

<Alert icon={false} onClose={...}>
    <Typography color="inherit" textStyle="h5">
        Alert content
    </Typography>
</Alert>

iconAlignment

<Alert iconAlignment="top" onClose={...}>
    <Typography color="inherit" textStyle="h5">
        This is a lot of alert content to help illustrate how icons can be
        aligned. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        Perferendis culpa commodi nobis nesciunt! Blanditiis cumque dolore ipsam
        tempora repellat quidem voluptatum, molestias cupiditate laborum. Nisi
        ipsa quo odio sit veniam.
    </Typography>
</Alert>

inline

<Alert inline onClose={...}>
    <Typography color="inherit" textStyle="h5">
        Alert content
    </Typography>
</Alert>

closeIcon

<Alert closeIcon={<IconInfo color="currentColor" size={16} />} onClose={...}>
    <Typography color="inherit" textStyle="h5">
        Alert content
    </Typography>
</Alert>

severity

<Alert severity="info" onClose={...}>
    <Typography color="inherit" textStyle="h5">
        Info
    </Typography>
</Alert>
<Alert severity="success" onClose={...}>
    <Typography color="inherit" textStyle="h5">
        Success
    </Typography>
</Alert>
<Alert severity="warning" onClose={...}>
    <Typography color="inherit" textStyle="h5">
        Warning
    </Typography>
</Alert>
<Alert severity="error" onClose={...}>
    <Typography color="inherit" textStyle="h5">
        Error
    </Typography>
</Alert>

theme

<Alert severity="info" theme="base900" onClose={...}>
    <Typography color="inherit" textStyle="h5">
        base900 theme - Info
    </Typography>
</Alert>
<Alert severity="success" theme="base900" onClose={...}>
    <Typography color="inherit" textStyle="h5">
        base900 theme - Success
    </Typography>
</Alert>
<Alert severity="warning" theme="base900" onClose={...}>
    <Typography color="inherit" textStyle="h5">
        base900 theme - Warning
    </Typography>
</Alert>
<Alert severity="error" theme="base900" onClose={...}>
    <Typography color="inherit" textStyle="h5">
        base900 theme - Error
    </Typography>
</Alert>

Event Handlers

<Alert onClose={() => {}}>
    <Typography color="inherit" textStyle="h5">
        Alert content
    </Typography>
</Alert>

Responsiveness

<Alert inline={{ base: false, md: true }} severity="success" onClose={...}>
    <Typography color="inherit" textStyle="h5">
        Alert content
    </Typography>
</Alert>

Full API

NameTypeDefault
childrenReactNode

The content to render. We recommend supplying basic string nodes so that theming can be dynamically applied to the content, but supplying arbitrary children is possible.

'This is an Alert - check it out!'
iconReactNode

The icon to use at the beginning of the Alert. This can be a custom Coral Icon. If false the icon will not appear.

undefined
iconAlignment"top" | "middle"

The alignment of the icons within the Alert.

middle
closeIconReactNode

The icon to use for the Close button. This can be a custom Coral Icon. The default value will be the Coral’s dismiss icon. This prop should only be used alongside the onClose prop, as the close icon will not be displayed without a close handler.

inlineResponsiveVariant<boolean>

If true, will set the container to be inline-block, meaning the width of the container will be set to the width of the message inside.

false
onCloseEventHandler<SyntheticEvent<HTMLButtonElement, Event>>

An optional callback function that will be called when clicking the Close button.

severity"error" | "info" | "success" | "warning" | undefined

The severity level of the alert, controlling the colour scheme displayed.

success
severityIconTitlestring

Optional title to use for the severity icon. Useful for translations.

theme"semantic" | "base900" | undefined

The colourway applied to this component. This works differently to the generic theme prop on other components, as it applies different variations of the Alert based on the specified severity.

semantic
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: {
  'id': 'close-button',
  'aria-label': 'Close button',
  'data-testid': 'close-button'
};

Design

Good to know

Choose an alert if there is important information you want to draw attention to, it is important that this doesn’t interrupt the users task but just grab their attention.

Why are there 4 alert colours? These correspond to the severity of the alert:

  • Red: Error
  • Orange: Warning
  • Blue: Info (good or bad)
  • Green: Success

Customisation

Our alert component has a few variations you can play with. These include:

  • Dark (Default) and Light mode
  • Dismissible or not

Component breakdown

  • Corner radius: 12px
  • Outline: 2px
  • Item padding: 16px
  • Horizontal padding: 16px
  • Vertical padding: 8px
  • Text: H5 & Body 1
Last updated on
AccordionAppDownloadButton