# Install

```shell
npm i @vaadin/accordion@${version.vaadin.web}
npm i @mate/component-addons@${version.mate.web}
```

# Import

```javascript
import '@vaadin/button';
import '@component-addons/button';
```

# Variants

## Panels with summary and icons

```html
<vaadin-accordion>
    <vaadin-accordion-panel>
        <mate-details-summary slot="summary" title-text="First panel">
            <span theme="badge">Information</span>
            <span theme="badge">Information</span>
            <vaadin-button theme="icon" slot="action">
                <span theme="icon">delete</span>
            </vaadin-button>
            <vaadin-button theme="icon" slot="action">
                <span theme="icon">content_copy</span>
            </vaadin-button>
        </mate-details-summary>
        <span>Content</span>
    </vaadin-accordion-panel>
    <vaadin-accordion-panel disabled>
        <mate-details-summary slot="summary" title-text="Disabled panel">
            <span theme="badge">Information</span>
            <span theme="badge">Information</span>
            <vaadin-button theme="icon" slot="action">
                <span theme="icon">delete</span>
            </vaadin-button>
            <vaadin-button theme="icon" slot="action">
                <span theme="icon">content_copy</span>
            </vaadin-button>
        </mate-details-summary>
        <span>Content</span>
    </vaadin-accordion-panel>
</vaadin-accordion>
```