Callout
Callouts are an excerpt of text used to draw attention to important or interesting information. They should not be confused with Page alerts.
import { ... } from '@ag.ds-next/react/callout';Usage
Callout components can be imported via the callout entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/callout';Props
| Prop | Type | Description |
|---|---|---|
| as? | ElementType<any> | |
| background? | "shade" | "shadeAlt" | @deprecated Use `onBodyAlt` instead to flag if the Callout is placed on an area with a "bodyAlt" background. |
| children? | ReactNode | |
| icon? | ReactNode | Specify a custom icon to overwrite the default icon |
| onBodyAlt? | boolean | If the Callout component is placed on a page with `bodyAlt` background, set this prop to `true`. |
| title? | string | Title will appear in bold |
| tone? | "info" | "neutral"Default: "neutral" | Tone will change the background color |
| variant? | "regular" | "compact" | "feature"Default: "regular" | Variant will change the padding and gap |
| Prop | Type | Description |
|---|---|---|
| as? | "h2" | "h3" | "h4" | "h5"Default: "h2" | |
| children? | ReactNode | |
| variant? | "regular" | "compact" | "feature"Default: "regular" |
Source
You can view the full source code for this package on Github.