💬 Material Dialog Card

NOTE

✨ Available on 💎 Ultimate Version Only

✨ Overview

The Material Dialog Card brings native-like dialog interactions to your dashboard. Designed to display detailed information or controls without leaving the current view, it supports a wide range of content cards and seamless hash-based navigation.

☀️ Light Mode

🌙 Dark Mode

✨ Key Features

• Hash Navigation: Opens effortlessly using URL hashes (e.g., #dialog), making it easy to link from other cards.
• Adaptive Layout: Automatically adjusts between a centered dialog and a full-screen view based on device size.
• Rich Header: Includes customizable titles, icons, area indicators, and action buttons.
• Dropdown Menus: Supports overflow menus in the header for secondary actions.
• Flexible Content: Can host any combination of Lovelace cards inside the dialog body.
• Views Management: Supports multiple sub-views ("Pages") within the dialog. Navigate between views using header buttons, enabling rich interactive interfaces. (Alpha Preview)

⚙️ Configuration

Name	Type	Default	Description
type	string	Required	custom:material-dialog-card
hash	string	#dialog	The URL hash that triggers this dialog to open.
cards	list	[]	A list of cards to display inside the dialog body.
views	list	[]	Optional list of sub-views to display inside the dialog body. (Alpha Preview)
header	object	Optional	Configuration for the dialog header.
settings	object	Optional	Additional behavior settings.

Header Options (header)

Name	Type	Default	Description
name	string	Entity Name	Title text displayed in the header.
entity	string	Optional	Entity used to derive name and state.
button_type	string	name	Controls header display: state or name.
show_area	boolean	true	Displays the area associated with the entity.
sub_buttons	list	[]	List of icon buttons displayed in the header.
dropdown_buttons	list	[]	List of items for the overflow dropdown menu.

Settings Options (settings)

Name	Type	Default	Description
show_old_dialog	boolean	false	Forces the use of the legacy ha-dialog instead of ha-adaptive-dialog.

Views Options (views) (Alpha Preview)

Name	Type	Default	Description
view_id	string	Required	Unique ID for the view (e.g., settings).
title	string	Optional	Custom title displayed when this view is active.
icon	string	Optional	Custom icon displayed when this view is active.
cards	list	[]	A list of cards to display inside this view.

🚀 Usage Examples

Example Configuration:

type: custom:material-dialog-card
hash: "#living-room-climate"
header:
  entity: climate.living_room
  name: Living Room Climate
  show_area: true
  sub_buttons:
    - icon: mdi:cog
      tap_action:
        action: navigate
        navigation_path: /config/integrations
cards:
  - type: thermostat
    entity: climate.living_room
  - type: entities
    entities:
      - entity: sensor.living_room_humidity
      - entity: sensor.living_room_temperature

Example Configuration with Views (Alpha Preview):

type: custom:material-dialog-card
hash: "#living-room-climate-advanced"
header:
  entity: climate.living_room
  name: Living Room Climate
  sub_buttons:
    - icon: mdi:cog
      navigate_view: settings
cards:
  - type: thermostat
    entity: climate.living_room
views:
  - view_id: settings
    title: Advanced Settings
    icon: mdi:cog
    cards:
      - type: entities
        entities:
          - entity: switch.living_room_ac_eco_mode
          - entity: sensor.living_room_humidity