---
meta:
    title: Dialog
    description:
layout: component
---

```html:preview
<div style="height: 200px;">
    <terra-dialog id="my-dialog">
      <p style="padding: 1em 5vw;">Hello world!</p>
    </terra-dialog>

    <terra-button for-dialog="my-dialog">
        Open Dialog
    </button>
</div>
```

## Examples

### First Example

TODO

### Second Example

TODO

[component-metadata:terra-dialog]
