Alerts#

The <Alert> component displays a brief & important message in a way that attracts a user's attention without interrupting a user's task.

If you are needing to display more descriptive, but important message to a user, consider using the <Callout> component.

Import#

import { Alert } from 'bumbag'

Usage#

Did you know?

Bumbag is a React UI Kit.

Editable example

<Alert
  title="Did you know?"
  showCloseButton
  onClickClose={() => alert('Closed!')}
>
  Bumbag is a React UI Kit.
</Alert>

<Alert
  title="Did you know?"
  showCloseButton
  onClickClose={() => alert('Closed!')}
>
  Bumbag is a React UI Kit.
</Alert>

Titles#

You can set a title with the title prop.

Did you know?

Bumbag is a React UI Kit.

Did you know?

Bumbag is a React UI Kit.

Editable example

<Alert title="Did you know?">
  Bumbag is a React UI Kit.
</Alert>
<Alert title="Did you know?" isInline>
  Bumbag is a React UI Kit.
</Alert>

<Alert title="Did you know?">
  Bumbag is a React UI Kit.
</Alert>
<Alert title="Did you know?" isInline>
  Bumbag is a React UI Kit.
</Alert>

Types#

An alert can take a type of "info", "success", "warning" or "danger".

Did you know?

Bumbag is a React UI Kit.

Action applied

Your action was applied successfully.

Be careful

Performing this action can be harmful.

An error occurred

Unable to apply your action.

Editable example

<Alert title="Did you know?" type="info">
  Bumbag is a React UI Kit.
</Alert>
<Alert title="Action applied" type="success">
  Your action was applied successfully.
</Alert>
<Alert title="Be careful" type="warning">
  Performing this action can be harmful.
</Alert>
<Alert title="An error occurred" type="danger">
  Unable to apply your action.
</Alert>

<Alert title="Did you know?" type="info">
  Bumbag is a React UI Kit.
</Alert>
<Alert title="Action applied" type="success">
  Your action was applied successfully.
</Alert>
<Alert title="Be careful" type="warning">
  Performing this action can be harmful.
</Alert>
<Alert title="An error occurred" type="danger">
  Unable to apply your action.
</Alert>

Accents#

Alerts can have bordered accents.

Bumbag is a React UI Kit.

Editable example

<Alert accent>
  Bumbag is a React UI Kit.
</Alert>
<Alert accent="top">
  Bumbag is a React UI Kit.
</Alert>
<Alert accent="bottom">
  Bumbag is a React UI Kit.
</Alert>

<Alert accent>
  Bumbag is a React UI Kit.
</Alert>
<Alert accent="top">
  Bumbag is a React UI Kit.
</Alert>
<Alert accent="bottom">
  Bumbag is a React UI Kit.
</Alert>

Variants#

The <Alert> component comes with three default variants:

An alert with a border,
An alert with a tint,
A filled alert.

You can even make your own Alert variant.

Bordered#

Did you know?

Bumbag is a React UI Kit.

Action applied

Your action was applied successfully.

Be careful

Performing this action can be harmful.

An error occurred

Unable to apply your action.

Editable example

<Alert variant="bordered" title="Did you know?" type="info">
  Bumbag is a React UI Kit.
</Alert>
<Alert variant="bordered" title="Action applied" type="success">
  Your action was applied successfully.
</Alert>
<Alert variant="bordered" title="Be careful" type="warning">
  Performing this action can be harmful.
</Alert>
<Alert variant="bordered" title="An error occurred" type="danger">
  Unable to apply your action.
</Alert>

<Alert variant="bordered" title="Did you know?" type="info">
  Bumbag is a React UI Kit.
</Alert>
<Alert variant="bordered" title="Action applied" type="success">
  Your action was applied successfully.
</Alert>
<Alert variant="bordered" title="Be careful" type="warning">
  Performing this action can be harmful.
</Alert>
<Alert variant="bordered" title="An error occurred" type="danger">
  Unable to apply your action.
</Alert>

Tint#

Did you know?

Bumbag is a React UI Kit.

Action applied

Your action was applied successfully.

Be careful

Performing this action can be harmful.

An error occurred

Unable to apply your action.

Editable example

<Alert variant="tint" title="Did you know?" type="info">
  Bumbag is a React UI Kit.
</Alert>
<Alert variant="tint" title="Action applied" type="success">
  Your action was applied successfully.
</Alert>
<Alert variant="tint" title="Be careful" type="warning">
  Performing this action can be harmful.
</Alert>
<Alert variant="tint" title="An error occurred" type="danger">
  Unable to apply your action.
</Alert>

<Alert variant="tint" title="Did you know?" type="info">
  Bumbag is a React UI Kit.
</Alert>
<Alert variant="tint" title="Action applied" type="success">
  Your action was applied successfully.
</Alert>
<Alert variant="tint" title="Be careful" type="warning">
  Performing this action can be harmful.
</Alert>
<Alert variant="tint" title="An error occurred" type="danger">
  Unable to apply your action.
</Alert>

Fill#

Did you know?

Bumbag is a React UI Kit.

Action applied

Your action was applied successfully.

Be careful

Performing this action can be harmful.

An error occurred

Unable to apply your action.

Editable example

<Alert variant="fill" title="Did you know?" type="info">
  Bumbag is a React UI Kit.
</Alert>
<Alert variant="fill" title="Action applied" type="success">
  Your action was applied successfully.
</Alert>
<Alert variant="fill" title="Be careful" type="warning">
  Performing this action can be harmful.
</Alert>
<Alert variant="fill" title="An error occurred" type="danger">
  Unable to apply your action.
</Alert>

<Alert variant="fill" title="Did you know?" type="info">
  Bumbag is a React UI Kit.
</Alert>
<Alert variant="fill" title="Action applied" type="success">
  Your action was applied successfully.
</Alert>
<Alert variant="fill" title="Be careful" type="warning">
  Performing this action can be harmful.
</Alert>
<Alert variant="fill" title="An error occurred" type="danger">
  Unable to apply your action.
</Alert>

Accessibility#

The <Alert> component follows the WAI ARIA Alert Pattern.

Patterns#

The component has a role of "alert".
If an alert has a title, then the aria-labelledby attribute is set on the component.
If an alert has a description, then the aria-describedby attribute is set on the component.

References#

WAI ARIA Alert Pattern

Props#

Alert Props#

accent true | "top" | "bottom"

Placement of the accent (the side border).

accentSize string

Size of the accent (in px).

countdown number

Countdown timer of the alert (in ms).

hasIcon boolean

Should the alert have an icon depending on its type?

isInline boolean

Is the alert inline, and has the title beside its content?

onClickClose (event: MouseEvent<any, MouseEvent>) => void

Function to invoke when the alert close button is pressed.

showCloseButton boolean

Whether or not to show the close button.

title string

The title of the alert.

type "success" | "danger" | "warning" | "info"

The type of the alert.

closeButtonProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 807 more ...;
  ignoreGrayOverride?: boolean;
}

The props to spread onto the close button.

closeButtonIconProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 787 more ...;
  label?: string;
}

The props to spread onto the close button icon.

iconProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 787 more ...;
  label?: string;
}

The props to spread onto the alert icon.

Inherits Flex props

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Alert.Icon Props#

iconProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 787 more ...;
  label?: string;
}

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Alert.Content Props#

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Alert.Title Props#

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Alert.Description Props#

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Theming#

Alert.styles.base

Did you know?

Bumbag is a React UI Kit.

Alert.Content.styles.base

Did you know?

Bumbag is a React UI Kit.

Alert.Title.styles.base

Did you know?

Bumbag is a React UI Kit.

Alert.Description.styles.base

Did you know?

Bumbag is a React UI Kit.

Alert.IconWrapper.styles.base

Did you know?

Bumbag is a React UI Kit.

Alert.CloseButton.styles.base

Did you know?

Bumbag is a React UI Kit.

On this page