> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dialog

> Give a modal a visible heading and accessible name with Dialog.Title.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

Use `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`.

<StoryEmbed storyId="ui-surfaces-dialog--documentation" title="Dialog title example" height={300} />

## Add a modal title

```tsx theme={null}
import { Dialog, Modal } from 'twenty-ui/primitives/surfaces';
import { Text } from 'twenty-ui/primitives/typography';

type CreditModalProps = { isOpen: boolean };

export const CreditModal = ({ isOpen }: CreditModalProps) => (
  <Modal isOpen={isOpen} padding="large" autoHeight>
    <Dialog.Title>Grant credits</Dialog.Title>
    <Text>Add credits to this workspace.</Text>
  </Modal>
);
```

The title defaults to an `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

<ParamField body="Title.className" type="string | ((state: DialogTitleState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Title.color" type="&#x22;primary&#x22; | &#x22;secondary&#x22; | &#x22;tertiary&#x22;" default="primary">
  Theme font color. Defaults to `primary`.
</ParamField>

<ParamField body="Title.level" type="5 | 1 | 2 | 3 | 4 | 6" default="2">
  Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`.
</ParamField>

<ParamField body="Title.render" type="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.
</ParamField>

<ParamField body="Title.size" type="&#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xs&#x22;" default="lg">
  Visual font size, independent of the heading level. Defaults to `lg`.
</ParamField>

<ParamField body="Title.style" type="CSSProperties | ((state: DialogTitleState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>