---
title: Overview
position: 1
seo_title: Overview of the Dialog Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Dialog component, check out its available options in the live demo, and
  customize its appearance by setting its size as you wish on the fly.
---
## Dialog Overview

The Dialog component is a UI element that appears on top of the main content to display information, requests, or notifications that require user attention and action. It is a modal window that captures the user's focus and interaction, temporarily suspending their engagement with the underlying interface until they address the presented options or information. Dialogs are commonly used for tasks like confirming actions, providing input, or displaying critical updates to ensure clear communication and effective user interactions.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/appearance"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/dialog/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/dialog/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/dialogs/dialog"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/dialogs/dialog"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/dialog"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/dialog"}],"demo":"components/dialog/overview"}'></LiveDemo>

### Appearance

Dialogs provide built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI Dialog, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

#### Anatomy

The anatomy of the Dialog summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Title Bar"},{"text":"Title"},{"text":"Close button"},{"text":"Content area"},{"text":"Action bar"},{"text":"Overlay"}]}'>![](images/components-dialog-overview-anatomy-v2.png "")</BlueprintImage>

#### Color

The Dialog provides the `themeColor` configuration option that enables you to choose among the available, built-in colors that will be applied to it.

`themeColor` provides the following available options:

* `base`(default)
* `primary`&mdash;Primary dialogs visualize an important action that draws the attention of the user.
* `light`&mdash;Light dialogs are used to present actions of lower importance, providing a seamless appearance, and are particularly suitable for user interfaces with a light color scheme.
* `dark`&mdash;Dark dialogs are used to present actions of lower importance, providing a seamless appearance, and are particularly suitable for user interfaces with a dark color scheme.
* `none`&mdash;Does not set a `themeColor` and allows you to add your own, custom value.

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Dialog","description":"Find more information about the Kendo UI for Angular Dialog in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Dialog","description":"Find more information about the Telerik UI for Blazor Dialog in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/dialog/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Dialog","description":"Find more information about the Kendo UI for jQuery Dialog in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/dialog/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Dialog","description":"Find more information about the KendoReact Dialog in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/dialogs/dialog/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Dialog","description":"Find more information about the Kendo UI for Vue Dialog in the official product documentation of the component.","url":"http://www.telerik.com/kendo-vue-ui/components/dialogs/dialog/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Dialog","description":"Find more information about the Telerik UI for ASP.NET Core Dialog component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/layout/dialog/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Dialog","description":"Find more information about the Telerik UI for ASP.NET MVC Dialog component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/layout/dialog/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>