@octopusdeploy/design-system-components/dist/src/components/Paragraph/Paragraph.d.ts

The design systems component library.

import type { ReactNode } from "react";
/**
 * A named body typography size. Each size maps to a `text.body.regular` token.
 */
export type ParagraphSize = "large" | "medium" | "small" | "xSmall";
/**
 * A named text colour. `primary` and `secondary` map to generic `themeTokens.color.text` tokens
 * (theme-aware, adapting to light/dark);
 */
export type ParagraphColor = "primary" | "secondary";
export interface ParagraphProps {
    /**
     * The content of the paragraph, can be any valid React node.
     * Use of block level elements will trigger a lint error because they are not valid children of a `<p>` element.
     */
    children?: string | ReactNode;
    /**
     * The body typography size to apply. Maps to a `text.body.regular` token:
     * @default "medium"
     */
    size?: ParagraphSize;
    /**
     * The text colour to apply.
     *
     * - `primary`: `themeTokens.color.text.primary` (light `#282F38`, dark `#F4F6F8`)
     * - `secondary`: `themeTokens.color.text.secondary` (light `#515D70`, dark `#A9BBCB`)
     *
     */
    color?: ParagraphColor;
}
/**
 * Paragraph is a wrapper around a `<p>` element that removes the browser's default
 * margins and applies the design system's body typography. Use it for blocks of body
 * text where you want consistent styling without the user agent's built-in spacing.
 *
 * Spacing between paragraphs should be handled by the parent layout (e.g. a `Stack`),
 * not by the paragraph's own margins.
 *
 * @param props - The props for the paragraph. See {@link ParagraphProps}.
 * @param props.children - The content of the paragraph. Can be any valid React node.
 * @param props.size - The body typography size to apply.
 * - `large`: 1rem (16px), line height 1.5rem (24px)
 * - `medium`: 0.875rem (14px), line height 1.25rem (20px)
 * - `small`: 0.8125rem (13px), line height 1.25rem (20px)
 * - `xSmall`: 0.75rem (12px), line height 1.25rem (20px)
 * @param props.color - The text colour to apply.
 * @returns A `<p>` element with zeroed margins and design system body typography.
 */
export declare function Paragraph({ children, size, color }: ParagraphProps): import("react/jsx-runtime").JSX.Element;