@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
44 lines (43 loc) • 1.43 kB
TypeScript
import React from "react";
import { AkselColor } from "../../../types";
import { type BaseAlertContextProps } from "./BaseAlertRoot.context";
interface BaseAlertProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Component content.
*/
children: React.ReactNode;
/**
* Changes the size.
* @default "medium"
*/
size?: BaseAlertContextProps["size"];
/**
* Overrides color
*/
"data-color"?: AkselColor;
/**
* Intensity of the alert
*/
type: "moderate" | "strong";
/**
* Centers content and removes border-radius
* @default false
*/
global?: boolean;
/**
* Type of alert
*/
status?: BaseAlertContextProps["status"];
/**
* Changes the HTML element used for the root element.
*
* **Testing**: When using `axe-core` for accessibility testing, `section` might warn about unique landmarks if you have multiple Alerts on page with the same status.
* In those cases, consider using `div` as the root element, or adding unique `aria-label` or `aria-labelledby` props.
* @see [📝 Landmarks unique](https://dequeuniversity.com/rules/axe/4.6/landmark-unique)
* @default "section"
*/
as?: "section" | "div";
}
declare const BaseAlert: React.ForwardRefExoticComponent<BaseAlertProps & React.RefAttributes<HTMLDivElement>>;
export { BaseAlert };
export type { BaseAlertProps };