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#
Overlay#
You can use the Overlay utility with a Callout to display a modal-like component to the user.
Title#
Types#
Footer#
Close button#
Tints#
Custom icon#
Standalone#
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
Callout.Header.styles.base
Callout.Title.styles.base
Callout.Content.styles.base
Callout.Footer.styles.base
Callout.Close.styles.base
Callout.IconWrapper.styles.base