Anatomy
Note: Image is not to scale
- Icon - Semantic only
- Text
- App bar
- Button icon
Options
Variants
There are four variants warning, information, success, and error.
Shadow
Enable shadow by passing shadow property.
Dismissable
To allow the Alert Banner to be dismissed pass the dismissable property and add <AlertBanner.Trigger/>.
Behavior
Text overflow
When the text overflows it will wrap and resize the AlertBanner.
Guidance
When to use shadows
Apply the property shadow when overlaying content.
Semantic messaging only
The alert banner is strictly for semantic messaging around system status. This means the use of including marketing or other messaging diminishes the effectiveness of semantic messaging.
API Reference
AlertBannerRoot
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| position | App bar's position in time and space | "fixed" | "absolute" | "relative" | "sticky" | ({ "@sm"?: "fixed" | "absolute" | "relative" | "sticky"; "@md"?: "fixed" | "absolute" | "relative" | "sticky"; "@lg"?: "fixed" | "absolute" | "relative" | "sticky"; ... 21 more ...; "@initial"?: "fixed" | ... 2 more ... | "sticky"; } & { ...; }) | ---- | False |
| shadow | App bar's shadow in time and space | boolean | "true" | ({ "@sm"?: boolean | "true"; "@md"?: boolean | "true"; "@lg"?: boolean | "true"; "@xl"?: boolean | "true"; "@xxl"?: boolean | "true"; "@notSm"?: boolean | "true"; "@notMd"?: boolean | "true"; ... 17 more ...; "@initial"?: boolean | "true"; } & { ...; }) | ---- | False |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS<{ sm: `(max-width: ${string})`; md: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; lg: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xxl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; notS... | ---- | False |
| variant | 4 predefined alert banners each tied to our symantic messaging on our site. They are Warning, Information, Success, and Error. | "error" | "warning" | "success" | "information" | ({ "@sm"?: "error" | "warning" | "success" | "information"; "@md"?: "error" | "warning" | "success" | "information"; "@lg"?: "error" | "warning" | "success" | "information"; ... 21 more ...; "@initial"?: "error" | ... 2 more ... | "information"; } & { ...; }) | information as AlertBannerVariants[variant] | False |
| dismissable | The alert banner can be permanent or dismissable. | boolean | "false" | ({ "@sm"?: boolean | "false"; "@md"?: boolean | "false"; "@lg"?: boolean | "false"; "@xl"?: boolean | "false"; "@xxl"?: boolean | "false"; "@notSm"?: boolean | "false"; "@notMd"?: boolean | "false"; ... 17 more ...; "@initial"?: boolean | "false"; } & { ...; }) | true as AlertBannerVariants[dismissable] | False |
AlertBannerTrigger
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| icon | "left" | "right" | "center" | "none" | ({ "@sm"?: "left" | "right" | "center" | "none"; "@md"?: "left" | "right" | "center" | "none"; "@lg"?: "left" | "right" | "center" | "none"; "@xl"?: "left" | "right" | "center" | "none"; ... 20 more ...; "@initial"?: "left" | ... 2 more ... | "none"; } & { ...; }) | ---- | False | |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS | ---- | False |
| variant | "cta" | "secondary" | "primary" | ({ "@sm"?: "cta" | "secondary" | "primary"; "@md"?: "cta" | "secondary" | "primary"; "@lg"?: "cta" | "secondary" | "primary"; "@xl"?: "cta" | "secondary" | "primary"; ... 20 more ...; "@initial"?: "cta" | ... 1 more ... | "primary"; } & { ...; }) | ---- | False | |
| density | "default" | "compact" | ({ "@sm"?: "default" | "compact"; "@md"?: "default" | "compact"; "@lg"?: "default" | "compact"; "@xl"?: "default" | "compact"; "@xxl"?: "default" | "compact"; "@notSm"?: "default" | "compact"; ... 18 more ...; "@initial"?: "default" | "compact"; } & { ...; }) | ---- | False | |
| isOutline | boolean | "true" | "false" | ({ "@sm"?: boolean | "true" | "false"; "@md"?: boolean | "true" | "false"; "@lg"?: boolean | "true" | "false"; "@xl"?: boolean | "true" | "false"; "@xxl"?: boolean | "true" | "false"; ... 19 more ...; "@initial"?: boolean | ... 1 more ... | "false"; } & { ...; }) | ---- | False |
AlertBannerContent
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| as | WPDS provides an as prop for changing which tag a component outputs. | never | ---- | False |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS<{ sm: `(max-width: ${string})`; md: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; lg: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xxl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; notS... | ---- | False |