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

# ConsequencesBullets

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

> List wrapper for consequence rows with no browser list chrome.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-root) | `flex flex-col gap-2 m-0 p-0 list-none` | List wrapper for consequence rows with no browser list chrome. |
| [item](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-item) | `grid grid-cols-[18px_1fr] items-start gap-x-2.5` | Two-column row that keeps the icon column aligned even when the icon is empty. |
| [icon](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-icon) | 2 classes | Fixed icon cell tinted by row tone via [ConsequencesBullets.toneWarn](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-toneWarn) or [ConsequencesBullets.toneDanger](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-toneDanger). |
| [text](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-text) | `flex flex-col gap-0.5 min-w-0` | Label and optional description stack for one consequence. |
| [label](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-label) | `text-[13px] font-semibold leading-[1.35] text-foreground` | Foreground consequence title in the body text role. |
| [description](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-description) | `text-[11.5px] font-normal leading-[1.4] text-muted-foreground` | Supporting consequence detail text below the label. |
| [toneWarn](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-toneWarn) | `text-warning` | Warning tone applied to the row icon for cautionary consequences. |
| [toneDanger](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-toneDanger) | `text-destructive` | Destructive tone applied to the row icon for irreversible consequences. |

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

## root

> List wrapper for consequence rows with no browser list chrome.

Default classes:

`flex flex-col gap-2 m-0 p-0 list-none`

Source: `client/lib/theme/vueda-tailwind/display/ConsequencesBullets.theme.js:16`

<a id="theme-key-ConsequencesBullets-item"></a>

## item

> Two-column row that keeps the icon column aligned even when the icon is empty.

Default classes:

`grid grid-cols-[18px_1fr] items-start gap-x-2.5`

Source: `client/lib/theme/vueda-tailwind/display/ConsequencesBullets.theme.js:20`

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

## icon

> Fixed icon cell tinted by row tone via [ConsequencesBullets.toneWarn](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-toneWarn) or [ConsequencesBullets.toneDanger](/v3/reference/theming/keys/ConsequencesBullets.md#theme-key-ConsequencesBullets-toneDanger).

Default classes:

```text
flex h-[18px] w-[18px] items-center justify-center mt-px
text-[14px] leading-none text-muted-foreground
```

Source: `client/lib/theme/vueda-tailwind/display/ConsequencesBullets.theme.js:24`

<a id="theme-key-ConsequencesBullets-text"></a>

## text

> Label and optional description stack for one consequence.

Default classes:

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

Source: `client/lib/theme/vueda-tailwind/display/ConsequencesBullets.theme.js:31`

<a id="theme-key-ConsequencesBullets-label"></a>

## label

> Foreground consequence title in the body text role.

Default classes:

`text-[13px] font-semibold leading-[1.35] text-foreground`

Source: `client/lib/theme/vueda-tailwind/display/ConsequencesBullets.theme.js:35`

<a id="theme-key-ConsequencesBullets-description"></a>

## description

> Supporting consequence detail text below the label.

Default classes:

`text-[11.5px] font-normal leading-[1.4] text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/display/ConsequencesBullets.theme.js:39`

<a id="theme-key-ConsequencesBullets-toneWarn"></a>

## toneWarn

> Warning tone applied to the row icon for cautionary consequences.

Default classes:

`text-warning`

Source: `client/lib/theme/vueda-tailwind/display/ConsequencesBullets.theme.js:43`

<a id="theme-key-ConsequencesBullets-toneDanger"></a>

## toneDanger

> Destructive tone applied to the row icon for irreversible consequences.

Default classes:

`text-destructive`

Source: `client/lib/theme/vueda-tailwind/display/ConsequencesBullets.theme.js:47`