---
url: "https://vueda.dev/v3/reference/api/js/utils/actionVariant.md"
title: "utils/actionVariant"
---

# utils/actionVariant

## Overview

Resolves a model action's Button (tone, emphasis) from two
layers. Layer 1 is the action's intrinsic, placement-independent tone (the
color axis): a delete/destroy action is destructive, everything else neutral.
Layer 2 is contextual (the structure axis): the view's hero action is promoted
to a filled CTA, and every other action uses the placement emphasis chosen by
where it is rendered (outline in a page-title or action bar, ghost in a dense
bulk strip). Shared by `LinkModelView`, the single chokepoint every action
button renders through, so the two layers resolve in exactly one place.

## Methods

- [actionTone](/v3/reference/api/js/utils/actionVariant/functions/actionTone.md) - The intrinsic, placement-independent tone for an action.
- [resolveActionVariant](/v3/reference/api/js/utils/actionVariant/functions/resolveActionVariant.md) - Folds the two layers into a `{ tone, emphasis }` pair for `Button`.

## Types

### [ActionVariantInput](/v3/reference/api/js/utils/actionVariant/types/ActionVariantInput.md)

## Source

`client/lib/utils/actionVariant.js:1`