Skip to main content

​
TipSelector

Allows customers to select a tip amount from preset percentages or enter a custom amount. Displays the calculated tip based on the order subtotal.

​
Preview

View in Storybook

​
Import

import { TipSelector } from '@/components/TipSelector'

​
Usage

<TipSelector
  subtotal={cart.subtotal}
  selectedTip={tipAmount}
  onTipChange={setTipAmount}
/>

​
Props

​
subtotal
number
required
Order subtotal used to calculate percentage-based tips.
​
selectedTip
number
required
The currently selected tip amount in cents.
​
onTipChange
(amount: number) => void
required
Callback fired when the tip selection changes.
​
presets
number[]
default:"[15, 18, 20, 25]"
Array of percentage presets to display as quick-select buttons.

​
Behavior

  • Preset percentage buttons with calculated dollar amounts
  • “Custom” option reveals a numeric input
  • “No tip” option to explicitly set tip to $0
  • Active preset is highlighted with primary accent