---
url: "https://vueda.dev/v3/reference/theming/keys/AccordionTrigger.md"
title: "AccordionTrigger"
---

# AccordionTrigger

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The clickable accordion header. It uses the container typography rhythm, exposes a focus outline, and rotates direct SVG icons when the item is open.

Vue component: [AccordionTrigger](/v3/reference/api/vue/AccordionTrigger.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/AccordionTrigger.md#theme-key-AccordionTrigger-root) | 4 classes | The clickable accordion header. It uses the container typography rhythm, exposes a focus outline, and rotates direct SVG icons when the item is open. |
| [header](/v3/reference/theming/keys/AccordionTrigger.md#theme-key-AccordionTrigger-header) | `flex` | The text wrapper inside the trigger. It stays minimal so custom trigger content can define its own stacking or inline layout. |
| [icon](/v3/reference/theming/keys/AccordionTrigger.md#theme-key-AccordionTrigger-icon) | 2 classes | The disclosure icon beside the trigger text. It is optically nudged down to align with the first text line and uses muted color until inherited state changes it. |

<a id="theme-key-AccordionTrigger-root"></a>

## root

> The clickable accordion header. It uses the container typography rhythm, exposes a focus outline, and rotates direct SVG icons when the item is open.

Default classes:

```text
flex flex-1 items-start justify-between gap-4
rounded-md py-4 text-left text-body font-medium
transition-all hover:underline focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50
[&[data-state=open]>svg]:rotate-180
```

Source: `client/lib/theme/vueda-tailwind/shell/AccordionTrigger.theme.js:18`

<a id="theme-key-AccordionTrigger-header"></a>

## header

> The text wrapper inside the trigger. It stays minimal so custom trigger content can define its own stacking or inline layout.

Default classes:

`flex`

Source: `client/lib/theme/vueda-tailwind/shell/AccordionTrigger.theme.js:36`

<a id="theme-key-AccordionTrigger-icon"></a>

## icon

> The disclosure icon beside the trigger text. It is optically nudged down to align with the first text line and uses muted color until inherited state changes it.

Default classes:

```text
text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5
transition-transform duration-200
```

Source: `client/lib/theme/vueda-tailwind/shell/AccordionTrigger.theme.js:42`