Dialog.Title inside Twenty UI’s existing Modal. It provides the shared modal heading style and automatically connects the heading to the modal’s accessible name. The public Dialog namespace currently exports Title.
Add a modal title
h2 with large type, primary text color, centered alignment, and spacing-4 below it. Use level to change the document outline independently of size. Native className and style can adjust alignment and spacing.
Native attributes, refs, and render are forwarded to the heading. Keep a heading element when using render, and keep the title inside Modal so its accessible naming relationship is available.
Props
Dialog.Title
string | ((state: DialogTitleState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
"primary" | "secondary" | "tertiary"
default:"primary"
Theme font color. Defaults to
primary.5 | 1 | 2 | 3 | 4 | 6
default:"2"
Semantic heading level, from
h1 through h6. Does not change the visual size. Defaults to 2.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTitleState>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."sm" | "md" | "lg" | "xs"
default:"lg"
Visual font size, independent of the heading level. Defaults to
lg.CSSProperties | ((state: DialogTitleState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.