DialogTitle

import { DialogTitle } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
align	"center" | "inherit" | "left" | "right" | "justify"	—
children	React.ReactNode	yes
className	string	—
component	"span"	—
gutterBottom	boolean	—
noWrap	boolean	—
paragraph	boolean	—
variant	"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2"	—
variantMapping	{ [key: string]: string; }	—
color	"inherit" | "disabled" | "error" | "primary" | "secondary" | "initial"	—
onClick	React.ReactEventHandler<HTMLElement> & React.MouseEventHandler<HTMLSpanElement>	—
style	React.CSSProperties	—
id	string	—
includeMargin	boolean	—

Example

This is the example the design-system sync renders and verifies for this component.

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@rebasepro/ui";

// DialogTitle only renders inside Dialog's Radix context (it wraps
// DialogPrimitive.Title asChild) — these previews are the full parent
// composition. Same portal-escape problem as Dialog: needs
// cfg.overrides.DialogTitle = { cardMode: "single", primaryStory: "Default" }.

// Default variant is "subtitle2" (component default) — smaller, dense title
// used for compact dialogs (e.g. row-action confirmations).
export const Default = () => (
    <div className="p-4 h-[280px]">
        <Dialog open onOpenChange={() => {}} maxWidth="sm">
            <DialogTitle>Regenerate API key</DialogTitle>
            <DialogContent>
                A new secret will be issued. The old one keeps working for 24h.
            </DialogContent>
            <DialogActions>
                <Button variant="text">Cancel</Button>
                <Button variant="filled">Regenerate</Button>
            </DialogActions>
        </Dialog>
    </div>
);