> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <TipSelector />

> Preset and custom tip amount picker for the checkout flow.

# TipSelector

<Snippet file="api-key-location.mdx" />

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

Desktop

Mobile

## Import

```tsx theme={null}
import { TipSelector } from '@/components/TipSelector'
```

## Usage

```tsx theme={null}
<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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.