Price

Right-aligned monetary amount with optional currency suffix from @duo/ui.

Examples

Properties

Property	Attribute	Description	Type name	Type	Default
`amount`	`amount`	Numeric amount when the default slot is empty.	`string`	`string`	`""`
`currency`	`currency`	Currency symbol or code when the currency slot is empty.	`string`	`string`	`""`
`emphasis`	`emphasis`	Larger, higher-contrast amount typography.	`boolean`	`boolean`	`false`

Slots

Name	Description
`default`	Amount value; overrides `amount` when provided.
`currency`	Currency symbol or code; overrides `currency` when provided.

Usage

Price formats a monetary amount with an optional currency suffix on the right, right-aligned typography, and a compact default style or a larger emphasis style for hero and comparison layouts.

Do

Use amount and currency for simple templated values; use slots when markup or localization needs more control.
Enable emphasis for primary plan prices, totals, or other amounts that should stand out in the layout.
Keep currency symbols or codes short and meaningful for the product locale.
Align Price to the end of rows or columns where monetary values are compared.

Don’t

Don’t use Price for editable monetary input — use a number or currency field instead.
Don’t use it for non-monetary numbers such as counts or percentages.
Don’t rely on emphasis styling alone to communicate promotional or discounted state — pair with supporting copy or badges.

Variants

Name	Purpose
`default`	Compact lead-weight amount with secondary text color.
`emphasis`	Larger headline-scale amount with primary text color (`emphasis` attribute).

Slots

Name	Purpose
`default`	Amount value; overrides `amount` when provided.
`currency`	Currency symbol or code; overrides `currency` when provided.