The SwapSettings component enables customizable slippage configuration in the Swap component.

​
Usage

// omitted for brevity
import {
  Swap,
  SwapSettings,
  SwapSettingsSlippageDescription,
  SwapSettingsSlippageInput,
  SwapSettingsSlippageTitle,
} from '@coinbase/onchainkit/swap';

<Swap>
  <SwapSettings>
    <SwapSettingsSlippageTitle>
      Max. slippage
    </SwapSettingsSlippageTitle>
    <SwapSettingsSlippageDescription>
      Your swap will revert if the prices change by more than the selected
      percentage.
    </SwapSettingsSlippageDescription>
    <SwapSettingsSlippageInput />
  </SwapSettings>
</Swap>

​
Override styles

You can override component styles using className. 
import {
  Swap,
  SwapSettings,
  SwapSettingsSlippageDescription,
  SwapSettingsSlippageInput,
  SwapSettingsSlippageTitle,
} from '@coinbase/onchainkit/swap';
// ---cut-before---
// omitted for brevity
<Swap>
  <SwapSettings>
    <SwapSettingsSlippageTitle className="text-[#EA580C]">
      Max. slippage
    </SwapSettingsSlippageTitle>
    <SwapSettingsSlippageDescription className="text-[#EA580C]">
      Your swap will revert if the prices change by more than the selected
      percentage.
    </SwapSettingsSlippageDescription>
    <SwapSettingsSlippageInput/>
  </SwapSettings>
</Swap>

​
Override icon

You can override the icon using the icon prop. 
// suppress twoslash error
declare const baseIcon: any;

import {
  Swap,
  SwapSettings,
  SwapSettingsSlippageDescription,
  SwapSettingsSlippageInput,
  SwapSettingsSlippageTitle,
} from '@coinbase/onchainkit/swap';
// ---cut-before---
// omitted for brevity
<SwapSettings icon={baseIcon}>
// ---cut-after---
</SwapSettings>

​
Add text

You can add text next to the SwapSettings component using text. 
import {
  Swap,
  SwapSettings,
  SwapSettingsSlippageDescription,
  SwapSettingsSlippageInput,
  SwapSettingsSlippageTitle,
} from '@coinbase/onchainkit/swap';
// ---cut-before---
// omitted for brevity
<SwapSettings text="Settings">
// ---cut-after---
</SwapSettings>

​
Override text

You can override component text by providing children text. 
import {
  Swap,
  SwapSettings,
  SwapSettingsSlippageDescription,
  SwapSettingsSlippageInput,
  SwapSettingsSlippageTitle,
} from '@coinbase/onchainkit/swap';
<Swap>
// ---cut-before---
// omitted for brevity

<SwapSettingsSlippageTitle>
  Slippage Settings
</SwapSettingsSlippageTitle>
<SwapSettingsSlippageDescription>
  Set a max slippage you are willing to accept.
</SwapSettingsSlippageDescription>
// ---cut-after---
</Swap>

​
Components

  • <SwapSettings /> - Container component for swap slippage settings.
  • <SwapSettingsSlippageDescription /> - Displays description text explaining the slippage setting.
  • <SwapSettingsSlippageInput /> - Input field for users to enter their desired max slippage percentage
  • <SwapSettingsSlippageTitle /> - Displays the title for the slippage settings section

​
Props

​
SwapSettingsProps

type SwapSettingsProps = {
  children?: ReactNode;
  className?: string; // Optional className override for top div element
  icon?: ReactNode; // Optional icon override
  text?: string; // Optional text override
};

​
SwapSettingsSlippageDescriptionProps

type SwapSettingsSlippageDescriptionProps = {
  children: ReactNode;
  className?: string; // Optional className override for top div element
};

​
SwapSettingsSlippageInputProps

type SwapSettingsSlippageInputProps = {
  className?: string; // Optional className override for top div element
  render?: (props: {
    slippageSetting: SlippageSettingsType;
    setSlippageSetting: (slippageSetting: SlippageSettingsType) => void;
    setSlippageValue: (number: number) => void;
  }) => ReactNode; // Custom render function for complete control of slippage input rendering
};

​
SwapSettingsSlippageTitleProps

type SwapSettingsSlippageTitleProps = {
  children: ReactNode;
  className?: string; // Optional className override for top div element
};