---
url: "https://vueda.dev/v3/reference/api/js/controls/button/buttonVariant.md"
title: "controls/button/buttonVariant"
---

# controls/button/buttonVariant

## Overview

Resolves a Button's two design axes (tone and emphasis) into the
`_Button*` composition primitive that paints it. Shared by `Button.vue` (for
the `data-tone` / `data-emphasis` attributes) and `Button.theme.js` (for the
composed primitive and the inline-flow flag) so the mapping lives in exactly
one place.

## Methods

- [resolveButtonVariant](/v3/reference/api/js/controls/button/buttonVariant/functions/resolveButtonVariant.md) - Folds the explicit `tone` / `emphasis` props into a single resolved cell.

## Types

### [ResolvedButtonVariant](/v3/reference/api/js/controls/button/buttonVariant/types/ResolvedButtonVariant.md)

### [ButtonEmphasis](/v3/reference/api/js/controls/button/buttonVariant/types/ButtonEmphasis.md)

`ButtonEmphasis = "fill" | "outline" | "ghost" | "link"`

### [ButtonTone](/v3/reference/api/js/controls/button/buttonVariant/types/ButtonTone.md)

`ButtonTone = "neutral" | "primary" | "destructive"`

## Source

`client/lib/controls/button/buttonVariant.js:1`