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

# _ActionBanner

_Composition primitive, consumed by leaf keys via `composes`._

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

> Shared banner row scaffold: icon tile plus body column with a bottom separator.

| Slot | Default classes | Description |
| --- | --- | --- |
| [banner](/v3/reference/theming/keys/_ActionBanner.md#theme-key-_ActionBanner-banner) | 2 classes | Shared banner row scaffold: icon tile plus body column with a bottom separator. |
| [bannerIcon](/v3/reference/theming/keys/_ActionBanner.md#theme-key-_ActionBanner-bannerIcon) | 3 classes | Shared 36 px icon tile geometry. Parent keys add tone colours. |
| [bannerBody](/v3/reference/theming/keys/_ActionBanner.md#theme-key-_ActionBanner-bannerBody) | `flex flex-col gap-1 min-w-0` | Shared body column beside the icon. |
| [bannerTitle](/v3/reference/theming/keys/_ActionBanner.md#theme-key-_ActionBanner-bannerTitle) | `text-[14px] font-semibold leading-[1.3] text-foreground` | Shared banner title text recipe. |
| [bannerDesc](/v3/reference/theming/keys/_ActionBanner.md#theme-key-_ActionBanner-bannerDesc) | `text-[12px] font-normal leading-[1.5] text-muted-foreground` | Shared banner supporting-copy recipe. |

<a id="theme-key-_ActionBanner-banner"></a>

## banner

> Shared banner row scaffold: icon tile plus body column with a bottom separator.

Default classes:

```text
flex items-start gap-3 p-4
border-b-hairline
```

Source: `client/lib/theme/vueda-tailwind/views/_ActionBannerPrimitives.theme.js:13`

<a id="theme-key-_ActionBanner-bannerIcon"></a>

## bannerIcon

> Shared 36 px icon tile geometry. Parent keys add tone colours.

Default classes:

```text
flex items-center justify-center shrink-0
w-9 h-9 rounded-full
text-[18px] font-semibold leading-none
```

Source: `client/lib/theme/vueda-tailwind/views/_ActionBannerPrimitives.theme.js:17`

<a id="theme-key-_ActionBanner-bannerBody"></a>

## bannerBody

> Shared body column beside the icon.

Default classes:

`flex flex-col gap-1 min-w-0`

Source: `client/lib/theme/vueda-tailwind/views/_ActionBannerPrimitives.theme.js:25`

<a id="theme-key-_ActionBanner-bannerTitle"></a>

## bannerTitle

> Shared banner title text recipe.

Default classes:

`text-[14px] font-semibold leading-[1.3] text-foreground`

Source: `client/lib/theme/vueda-tailwind/views/_ActionBannerPrimitives.theme.js:29`

<a id="theme-key-_ActionBanner-bannerDesc"></a>

## bannerDesc

> Shared banner supporting-copy recipe.

Default classes:

`text-[12px] font-normal leading-[1.5] text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/views/_ActionBannerPrimitives.theme.js:33`