Amount Option Tile

Example

Import

JavaScript

import '@sbddesign/bui-ui/amount-option-tile.js'

React

import { BuiAmountOptionTileReact as BuiAmountOptionTile } from '@sbddesign/bui-ui/react'

Usage

JavaScript

<bui-amount-option-tile
    primary-amount="100"
    secondary-amount="0.10"
    secondary-symbol="$"
    bitcoin-first="true"
    emoji="🙏"
    message="Thank you"
></bui-amount-option-tile>

React

<BuiAmountOptionTile
    primaryAmount="100"
    secondaryAmount="0.10"
    secondaryAymbol="$"
    bitcoinFirst="true"
    emoji="🙏"
    message="Thank you"
></BuiAmountOptionTile>

Properties

All properties and attributes are reflected.

Property	Attribute	Type	Required	Description
emoji	emoji	string	No	Emoji to display on the tile
message	message	string	No	Message text to display
showEmoji	show-emoji	boolean	No	Whether to show the emoji
showMessage	show-message	boolean	No	Whether to show the message
showSecondaryCurrency	show-secondary-currency	boolean	No	Whether to show secondary currency
bitcoinFirst	bitcoin-first	boolean	No	Display Bitcoin amount first
custom	custom	boolean	No	Whether this is a custom amount
amountDefined	amount-defined	boolean	No	Whether amount is defined
selected	selected	boolean	No	Whether the tile is selected
primaryAmount	primary-amount	number	No	Primary amount value
primarySymbol	primary-symbol	string	No	Symbol for primary currency
secondaryAmount	secondary-amount	number	No	Secondary amount value
secondarySymbol	secondary-symbol	string	No	Symbol for secondary currency
showEstimate	show-estimate	boolean	No	Whether to show estimate text
primaryTextSize	primary-text-size	string	No	Size of primary text (base, lg, xl, etc.)
secondaryTextSize	secondary-text-size	string	No	Size of secondary text (base, lg, xl, etc.)

Events

The component emits a click event with the following detail structure:

interface AmountTileClickDetail {
  emoji: string;
  message: string;
  primaryAmount: number;
  primarySymbol: string;
  secondaryAmount: number;
  secondarySymbol: string;
  custom: boolean;
  selected: boolean;
}