SlideButton

@coinbase/cds-mobile@8.34.1

A button that slides to confirm an action.

Import

import { SlideButton } from '@coinbase/cds-mobile/buttons/SlideButton'

SourceView source codeFigmaView Figma (internal only)

---

Related components

• Button,
• Switch,
• IconButton,
• Pressable

---

󰏖

View as Markdown

SlideButton

Use the onChange prop to listen and make changes to the checked state.

function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <SlideButton
      checked={checked}
      onChange={setChecked}
      onSlideComplete={() => console.log('Completed')}
      uncheckedLabel="Swipe to confirm"
      checkedLabel="Confirming..."
    />
  );
}

Negative SlideButton

You can use the variant prop to change the color of the button.

function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <SlideButton
      checked={checked}
      onChange={setChecked}
      onSlideComplete={() => console.log('Completed')}
      uncheckedLabel="Swipe to confirm"
      checkedLabel="Confirming..."
      variant="negative"
    />
  );
}

Compact SlideButton

Use the compact prop to reduce the height, border-radius and padding of the button:

function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <SlideButton
      checked={checked}
      onChange={setChecked}
      onSlideComplete={() => console.log('Completed')}
      uncheckedLabel="Swipe to confirm"
      checkedLabel="Confirming..."
      compact
    />
  );
}

Auto Complete on Threshold

You can set the button to automatically complete when the slide reaches the threshold:

function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <SlideButton
      checked={checked}
      onChange={setChecked}
      onSlideComplete={() => console.log('Completed')}
      uncheckedLabel="Swipe to confirm"
      checkedLabel="Confirming..."
      autoCompleteSlideOnThresholdMet
    />
  );
}

Custom Nodes on SlideButton

You can also use SlideButton with custom nodes.

function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <SlideButton
      checked={checked}
      onChange={setChecked}
      onSlideComplete={() => console.log('Completed')}
      uncheckedLabel="Swipe to enable notifications"
      checkedLabel="Enabling..."
      startUncheckedNode={<Icon color="fgInverse" name="bellCheck" size="m" />}
      endCheckedNode={<Icon color="fgInverse" name="bellInactive" size="m" />}
    />
  );
}

Custom Background and Handle Components

You can customize the background and handle components of the SlideButton.

function Example() {
  const [checked, setChecked] = useState(false);

  const CustomHandle = ({ checked, ...props }: SlideButtonHandleProps) => (
    <Pressable
      {...props}
      accessibilityLabel="Demo button"
      accessibilityRole="button"
      background={checked ? 'bgPositive' : 'bgNegative'}
      borderRadius={300}
      width="100%"
    >
      <HStack alignItems="center" height="100%" justifyContent="center" width="100%">
        <HStack height="100%" pin="right" alignItems="center" padding={2}>
          <Text font="label1">➡️</Text>
        </HStack>
      </HStack>
    </Pressable>
  );

  const CustomBackground = ({ checked, ...props }: SlideButtonBackgroundProps) => (
    <HStack
      {...props}
      bordered
      alignItems="center"
      background="bgSecondary"
      borderColor={checked ? 'fgPositive' : 'fgNegative'}
      borderRadius={300}
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Text font="headline">Slide me</Text>
    </HStack>
  );

  return (
    <SlideButton
      uncheckedLabel="Swipe to confirm"
      checkedLabel="Confirming..."
      checked={checked}
      onChange={setChecked}
      SlideButtonBackgroundComponent={CustomBackground}
      SlideButtonHandleComponent={CustomHandle}
      height={50}
    />
  );
}