---
title: DashboardWidget
description: DashboardWidget
element: vaadin-dashboard-widget
---

## Description

A Widget component for use with the Dashboard component

```html
<vaadin-dashboard-widget widget-title="Title">
  <span slot="header-content">Header</span>
  <div>Content</div>
</vaadin-dashboard-widget>
```

### Customization

You can configure the item by using `slot` names.

Slot name        | Description
-----------------|-------------
`header-content` | A slot for the widget header content.

#### Example

```html
<vaadin-dashboard-widget widget-title="Title">
  <span slot="header-content">Header</span>
  <div>Content</div>
</vaadin-dashboard-widget>
```

### Styling

The following shadow DOM parts are available for styling:

Part name                     | Description
------------------------------|-------------
`header`                      | The header of the widget
`title`                       | The title of the widget
`content`                     | The content of the widget
`button`                      | Set on all the buttons (move, resize and others)
`move-button`                 | The move button
`remove-button`               | The remove button
`resize-button`               | The resize button
`move-backward-button`        | The move backward button when in move mode
`move-forward-button`         | The move forward button when in move mode
`move-apply-button`           | The apply button when in move mode
`resize-shrink-width-button`  | The shrink width button when in resize mode
`resize-grow-width-button`    | The grow width button when in resize mode
`resize-shrink-height-button` | The shrink height button when in resize mode
`resize-grow-height-button`   | The grow height button when in resize mode
`resize-apply-button`         | The apply button when in resize mode

The following custom properties are available:

Custom Property                             | Description
--------------------------------------------|----------------------
`--vaadin-dashboard-widget-colspan`         | colspan of the widget
`--vaadin-dashboard-widget-rowspan`         | rowspan of the widget
`--vaadin-dashboard-widget-background`      | widget background
`--vaadin-dashboard-widget-border-radius`   | widget corner radius
`--vaadin-dashboard-widget-border-width`    | widget border width
`--vaadin-dashboard-widget-border-color`    | widget border color
`--vaadin-dashboard-widget-shadow`          | widget shadow (non edit mode)
`--vaadin-dashboard-widget-padding`         | padding around widget content
`--vaadin-dashboard-widget-title-wrap`      | widget title wrap

The following state attributes are available for styling:

Attribute      | Description
---------------|-------------
`selected`     | Set when the element is selected.
`focused`      | Set when the element is focused.
`move-mode`    | Set when the element is being moved.
`resize-mode`  | Set when the element is being resized.
`resizing`     | Set when the element is being resized.
`dragging`     | Set when the element is being dragged.
`editable`     | Set when the element is editable.
`first-child`  | Set when the element is the first child of the parent.
`last-child`   | Set when the element is the last child of the parent.

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### widgetTitle

**Type:** `string | null | undefined`

The title of the widget.