Toasts#

Import#

import { ToastManager, useToasts } from 'bumbag'

Setup#

To get started with rendering toasts to your app, you will need to put the <ToastManager /> component at the top level of your app.

The ToastManager component is essentially an overlay to render the toasts.

import { Provider, ToastManager } from 'bumbag';
const App = () => (
  <Provider theme={theme}>
    // ... your app
    <ToastManager />
  </Provider>
);

Usage#

To render a toast on your screen, invoke the add function with a title & message from the useToasts hook.

By default, the toast will appear for 5 seconds.

Editable example

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.add({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.add({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

Types#

Success#

Editable example

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.success({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.success({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

Danger#

Editable example

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.danger({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.danger({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

Warning#

Editable example

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.warning({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.warning({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

Info#

Editable example

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

Placement#

You can customise the placement of the toasts by using the placement prop on <ToastManager>.

placement is set to "top-end" by default.

import { ToastManager } from 'bumbag';
const App = () => (
  <ToastManager placement="bottom" />
);

Stacked toasts#

By default, toasts in Bumbag are stacked, meaning that you can display multiple toasts at the one time. However, you have the ability to disable this using the isStacked prop on <ToastManager>.

import { ToastManager } from 'bumbag';
const App = () => (
  <ToastManager isStacked={false} />
);

Custom Toast props#

You can override the Toast component props using the Toast.defaultProps theme variable. This variable accepts an object of the <Toast> props.

import { Provider } from 'bumbag';
const theme = {
  Toast: {
    defaultProps: {
      accent: 'bottom',
      hasIcon: false
    }
  }
}
const App = () => (
  <Provider theme={theme}>
    // ... your app
  </Provider>
);

Or you can change it via the toast instance:

Editable example

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({ accent: 'bottom', hasIcon: false, title: 'Did you know?', message: 'Bumbag is a UI Kit for React' })
      }
    >
      Add toast
    </Button>
  )
}

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({ accent: 'bottom', hasIcon: false, title: 'Did you know?', message: 'Bumbag is a UI Kit for React' })
      }
    >
      Add toast
    </Button>
  )
}

Dismiss timeout#

By default, the toast timeout is 5 seconds (5000ms). You can change this via the Toast.timeout theme variable.

To disable the timeout, set timeout to 0.

import { Provider } from 'bumbag';
const theme = {
  Toast: {
    timeout: 2000
  }
}
const App = () => (
  <Provider theme={theme}>
    // ... your app
  </Provider>
);

Or you can change it via the toast instance:

Editable example

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({ timeout: 2000, title: 'Did you know?', message: 'Bumbag is a UI Kit for React' })
      }
    >
      Add toast
    </Button>
  )
}

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({ timeout: 2000, title: 'Did you know?', message: 'Bumbag is a UI Kit for React' })
      }
    >
      Add toast
    </Button>
  )
}

Disable the countdown bar#

import { Provider } from 'bumbag';
const theme = {
  Toast: {
    showCountdown: false
  }
}
const App = () => (
  <Provider theme={theme}>
    // ... your app
  </Provider>
);

Or you can change it via the toast instance:

Editable example

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({ showCountdown: false, title: 'Did you know?', message: 'Bumbag is a UI Kit for React' })
      }
    >
      Add toast
    </Button>
  )
}

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({ showCountdown: false, title: 'Did you know?', message: 'Bumbag is a UI Kit for React' })
      }
    >
      Add toast
    </Button>
  )
}

Props#

ToastManager Props#

fade boolean

isStacked boolean

slide boolean

spacing string

overlayProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 808 more ...;
  timingFunction?: string;
}

toastProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 795 more ...;
  iconProps?: Pick<...>;
}

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

Toast Props#

countdown number

Inherits Alert props

accent true | "top" | "bottom"

Placement of the accent (the side border).

accentSize string

Size of the accent (in px).

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

Theming#

Toast.styles.base

Did you know?

Bumbag is a React UI Kit.

Toast.Content.styles.base

Did you know?

Bumbag is a React UI Kit.

Toast.Title.styles.base

Did you know?

Bumbag is a React UI Kit.

Toast.Description.styles.base

Did you know?

Bumbag is a React UI Kit.

Toast.IconWrapper.styles.base

Did you know?

Bumbag is a React UI Kit.

Toast.CloseButton.styles.base

Did you know?

Bumbag is a React UI Kit.

On this page