@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
40 lines (39 loc) • 1.23 kB
TypeScript
import React from "react";
import { PopoverProps } from "../popover/index.js";
import type { AkselColor } from "../types/index.js";
export interface HelpTextProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Pick<PopoverProps, "strategy" | "placement"> {
children: React.ReactNode;
/**
* Adds a title-tooltip with the given text
* @default "Mer informasjon"
*/
title?: string;
/**
* Classname for wrapper
*/
wrapperClassName?: string;
/**
* Overrides color.
* @default "info"
*
* @see 🏷️ {@link AkselColor}
* @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
* @private
*/
"data-color"?: AkselColor;
}
/**
* A component that displays a help text button with a popover.
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/helptext)
* @see 🏷️ {@link HelpTextProps}
*
* @example
* ```jsx
* <HelpText title="Hvor kommer dette fra?">
* Informasjonen er hentet fra X sin statistikk fra 2021
* </HelpText>
* ```
*/
export declare const HelpText: React.ForwardRefExoticComponent<HelpTextProps & React.RefAttributes<HTMLButtonElement>>;
export default HelpText;