Badge#
A badge can be commonly used as a notification or number indicator.
Import#
import { Badge } from 'bumbag';
Usage#
1
Editable example
No content#
Editable example
Colors#
12
12
12
12
12
12
Editable example
Sizes#
1
1
1
Editable example
Attachment#
You can attach a badge onto a component by providing it as a child of the component.
Hello world
1
Editable example
Props#
Badge Props#
isAttached
boolean
Indicates if the badge is attached to it's parent.
palette
"default" | "primary" | "secondary" | "success" | "danger" | "warning" | (string & {})
The color of the badge.
size
"default" | (string & {}) | "small" | "medium" | "large"
The size of the badge.
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#
Badge.styles.base
1
Badge.styles.sizes.default
1
Badge.styles.sizes.medium
1
Badge.styles.sizes.large
1
On this page