> Markdown version of [Styling](https://vaadin.com/docs/v24/components/confirm-dialog/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# Styling

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/v24/styling.md) for more details on how to style components.

### <a id="overlay"></a>Overlay

- Root element

  `vaadin-confirm-dialog-overlay`

- Modality curtain (backdrop)

  `vaadin-confirm-dialog-overlay::part(backdrop)`

- Dialog surface

  `vaadin-confirm-dialog-overlay::part(overlay)`

### <a id="header"></a>Header

- Header

  `vaadin-confirm-dialog-overlay::part(header)`

- Default title element

  `vaadin-confirm-dialog-overlay > [slot="header"]`

### <a id="content-area"></a>Content Area

- Content area

  `vaadin-confirm-dialog-overlay::part(content)`

- Message

  `vaadin-confirm-dialog-overlay::part(message)`

### <a id="footer"></a>Footer

- Footer

  `vaadin-confirm-dialog-overlay::part(footer)`

- Confirm button

  `vaadin-confirm-dialog-overlay > [slot="confirm-button"]`

- Reject button

  `vaadin-confirm-dialog-overlay > [slot="reject-button"]`

- Cancel button

  `vaadin-confirm-dialog-overlay > [slot="cancel-button"]`