Callout#

The <Callout> component used the Card component internally, and is used to highlight important content to the users.

If the content you are displaying is brief, important & requires the user's immediate attention, consider using the Alert component.

Import#

import { Callout } from 'bumbag';

Usage#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.

Editable example

<Callout width="600px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>

<Callout width="600px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>

Overlay#

You can use the Overlay utility with a Callout to display a modal-like component to the user.

Editable example

<Overlay.State>
  <Overlay.Disclosure>Open callout</Overlay.Disclosure>
  <Callout.Overlay title="This is a title">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices
    eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus
    augue sit amet justo.
  </Callout.Overlay>
</Overlay.State>

<Overlay.State>
  <Overlay.Disclosure>Open callout</Overlay.Disclosure>
  <Callout.Overlay title="This is a title">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices
    eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus
    augue sit amet justo.
  </Callout.Overlay>
</Overlay.State>

Title#

Example callout

Editable example

<Callout title="Example callout" width="600px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>

<Callout title="Example callout" width="600px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>

Types#

Example info callout

Example danger callout

Example success callout

Example warning callout

Editable example

<Stack spacing="major-2">
  <Callout type="info" title="Example info callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout type="danger" title="Example danger callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout type="success" title="Example success callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout type="warning" title="Example warning callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
</Stack>

<Stack spacing="major-2">
  <Callout type="info" title="Example info callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout type="danger" title="Example danger callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout type="success" title="Example success callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout type="warning" title="Example warning callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
</Stack>

Example callout

Editable example

<Callout
  footer={<ActionButtons palette="info" justifyContent="flex-end" />}
  title="Example callout"
  width="600px"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>

<Callout
  footer={<ActionButtons palette="info" justifyContent="flex-end" />}
  title="Example callout"
  width="600px"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>

Close button#

Example callout

Editable example

<Stack spacing="major-2">
  <Callout
    showCloseButton
    onClickClose={() => alert('Closed')}
    title="Example callout"
    width="600px"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout
    showCloseButton
    onClickClose={() => alert('Closed')}
    width="600px"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
</Stack>

<Stack spacing="major-2">
  <Callout
    showCloseButton
    onClickClose={() => alert('Closed')}
    title="Example callout"
    width="600px"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout
    showCloseButton
    onClickClose={() => alert('Closed')}
    width="600px"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
</Stack>

Tints#

Example info callout

Example danger callout

Example success callout

Example warning callout

Editable example

<Stack spacing="major-2">
  <Callout hasTint type="info" title="Example info callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout hasTint type="danger" title="Example danger callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout hasTint type="success" title="Example success callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout hasTint type="warning" title="Example warning callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
</Stack>

<Stack spacing="major-2">
  <Callout hasTint type="info" title="Example info callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout hasTint type="danger" title="Example danger callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout hasTint type="success" title="Example success callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
  <Callout hasTint type="warning" title="Example warning callout" width="600px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
    cursus id placerat congue, ultrices eget lectus. Duis posuere,
    lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
    consectetur lectus augue sit amet justo.
  </Callout>
</Stack>

Custom icon#

Example callout

Editable example

<Callout
  iconProps={{ icon: 'solid-igloo' }}
  title="Example callout"
  width="600px"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>

<Callout
  iconProps={{ icon: 'solid-igloo' }}
  title="Example callout"
  width="600px"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
  cursus id placerat congue, ultrices eget lectus. Duis posuere,
  lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
  consectetur lectus augue sit amet justo.
</Callout>

Standalone#

Example callout

Editable example

<Callout
  title="Example callout"
  width="600px"
  standalone
>
  <Callout.Icon />
  <Box>
    <Callout.Header>
      <Callout.Title>Example callout</Callout.Title>
    </Callout.Header>
    <Callout.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
      cursus id placerat congue, ultrices eget lectus. Duis posuere,
      lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
      consectetur lectus augue sit amet justo.
    </Callout.Content>
    <Callout.Footer>
      <ActionButtons palette="info" justifyContent="flex-end" />
    </Callout.Footer>
  </Box>
</Callout>

<Callout
  title="Example callout"
  width="600px"
  standalone
>
  <Callout.Icon />
  <Box>
    <Callout.Header>
      <Callout.Title>Example callout</Callout.Title>
    </Callout.Header>
    <Callout.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum,
      cursus id placerat congue, ultrices eget lectus. Duis posuere,
      lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
      consectetur lectus augue sit amet justo.
    </Callout.Content>
    <Callout.Footer>
      <ActionButtons palette="info" justifyContent="flex-end" />
    </Callout.Footer>
  </Box>
</Callout>

Accessibility#

Patterns#

If a callout has a title, then the aria-labelledby attribute is set on the component.
If a callout has a description, then the aria-describedby attribute is set on the component.

Props#

Callout Props#

title

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

The title of the callout.

hasTint boolean

Indicates if the callout has a tint.

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

Function to invoke when the close button is pressed.

showCloseButton boolean

Indicates if a close button should be visible.

standalone boolean

Indicates if the callout is standalone.

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

Type of callout.

footer

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Footer of the callout.

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;
}

Props to spread on the close button.

iconProps

BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & CSSProperties & LocalBoxProps & LocalIconProps

Props to spread on the icon.

Inherits Card props

variant (string & {}) | "shadowed" | "bordered"

Variant of the card.

headerAddon

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the header addon of the card.

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"

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#

Callout.styles.base

Example callout

Callout.Header.styles.base

Example callout

Callout.Title.styles.base

Example callout

Callout.Content.styles.base

Example callout

Callout.Footer.styles.base

Example callout

Callout.Close.styles.base

Example callout

Callout.IconWrapper.styles.base

Example callout

On this page

Callout#

Import#

Usage#

Overlay#

Title#

Types#

Footer#

Close button#

Tints#

Custom icon#

Standalone#

Accessibility#

Patterns#

Props#

Callout Props#

Theming#