UNPKG

@postenbring/hedwig-react

Version:

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

50 lines 1.57 kB
import { Box } from "../box"; interface HelpTextProps extends React.HTMLAttributes<HTMLButtonElement> { className?: string; /** * The content of the help text, often a word or phrase that could use some explanation */ children: React.ReactNode; /** * The help text that will be shown when the user clicks the trigger */ helpText: React.ReactNode; /** * The title of the help text. Used by screen readers and if the user hover over the help text */ title?: string; /** * Props for the `Box` that contains the help text */ boxProps?: React.ComponentProps<typeof Box>; /** * The side of the trigger the popover should be attached to * * @default "top" */ side?: "top" | "right" | "bottom" | "left"; /** * The alignment of the popover content * * @default "start" */ align?: "center" | "end" | "start"; } /** * Show a help text for a word or phrase when clicked * * Useful for providing explanations for domain-specific terms, acronyms or phrases that could do with further elaboration * * @example * ```tsx * <p> * En annen avgjørende faktor for avgifter er om nettbutikken er registrert i{" "} * <HelpText helpText={`VOEC er en forkortelse for "VAT on E-commerce" (mva. på e-handel).`}> * VOEC * </HelpText> * </p> * ``` */ export declare const HelpText: import("react").ForwardRefExoticComponent<HelpTextProps & import("react").RefAttributes<HTMLButtonElement>>; export {}; //# sourceMappingURL=help-text.d.ts.map