Slide Action

Import

import {Terminal} from '@kaiverse/k/ui'

Usage

When users swiped all the way to the end, we can call it a successful or confirmatory action.

Swipe to confirm

basic.tsx

<SlideAction
  label="Swipe to confirm"
  onSwipeEnd={() => {
    // do sth when users swiped to the end, e.g. call API, mutation data, etc...
  }}
/>

Reset

How to reset the component status?

via onSwipeEnd's argument

Call reset function that shipped with onSwipeEnd callback.

Swipe to confirm

Status: Waiting for confirmation

slide-action-interactive.tsx

import {SlideAction, type SlideActionOnSwipeEnd} from '@kaiverse/k/ui'

const handleOnSwipeEnd = useCallback<SlideActionOnSwipeEnd>((reset) => {
    // do sth when users swiped to the end, e.g. call API, mutation data, etc...
  setTimeout(() => {
    reset()
  }, 1000)
}, [])

return (
  <SlideAction
    label="Swipe to confirm"
    color={status ? '#059669' : undefined}
    icon={status ? <IconCheck className="size-5 text-white" /> : undefined}
    onSwipeEnd={handleOnSwipeEnd}
  />
)

via ref

Call resetState function from component ref.

Swipe to confirm

Status: Waiting for confirmation

Reset above SlideAction

slide-action-interactive.tsx

import {SlideAction, type SlideActionRef} from '@kaiverse/k/ui'

const slideActionRef = useRef<SlideActionRef>(null)

return (
  <>
    <SlideAction ref={slideActionRef}>
      Lorem ipsum dolor sit amet consectetur adipisicing elit
    </SlideAction>
    <button type="button" onClick={() => slideActionRef.current?.resetState()}>
      Reset below SlideAction
    </button>
  </>
)

Customization

Effects

• slideType: the slide progress effect.
• labelType: label effect.

Playground

Slide effect

Default: Slide background

Static fade-in background

Label effect

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, temporibus voluptatibus! Dolorum tenetur in distinctio quaerat, hic a soluta, veniam ut id porro adipisci molestias cumque perspiciatis asperiores facilis voluptatem.

Source code

custom-effect.tsx

import {SlideAction} from '@kaiverse/k/ui'

export default function CustomEffectDocs() {
  return (
    <>
      <h3>Slide effect</h3>
      <SlideAction>Default: Slide background</SlideAction>

      <SlideAction className="my-4" slideType="static">
        Static fade-in background
      </SlideAction>

      <h3>Label effect</h3>
      <SlideAction labelType="slide">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, temporibus voluptatibus!
        Dolorum tenetur in distinctio quaerat, hic a soluta, veniam ut id porro adipisci molestias
        cumque perspiciatis asperiores facilis voluptatem.
      </SlideAction>
    </>
  )
}

Icon

Playground

Slide to power off

Source code

custom-icon.tsx

import {SlideAction} from '@kaiverse/k/ui'

export default function SliderActionIconDocs() {
  return (
    <SlideAction
      className="border-none bg-[rgba(61,127,118,0.5)]"
      classNames={{label: 'font-bold text-lg'}}
      color="#fff"
      icon={
        <svg
          className="cursor-[inherit]"
          xmlns="http://www.w3.org/2000/svg"
          color="red"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M7 6a7.75 7.75 0 1 0 10 0" />
          <path d="M12 4l0 8" />
        </svg>
      }
      labelType="slide"
    >
      Slide to power off
    </SlideAction>
  )
}

Color 🎨

You can use the color prop to change the theme color.

Default color: #1d4ed8 (--k-slide-action-theme)

Playground

Random

color: #475569

Slide background

Fadein background

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa non ipsum, pariatur in eveniet neque dolores sequi, numquam aspernatur ratione veritatis nemo earum maxime aut distinctio repellat dolorum ipsa deleniti!

Gradient slide background

Slide to see bg color change

Source code

colorful.tsx

import {SlideAction} from '@kaiverse/k/ui'
import {useState} from 'react'

// Slate, Orange, Red, Emerald, Daisy's primary color, Cyan, Violet, Rose
const slideColors = [
  '#475569',
  '#ea580c',
  'red',
  '#059669',
  'oklch(var(--p))',
  '#0891b2',
  '#7c3aed',
  '#e11d48',
]

export default function SliderColorfulDocs() {
  const [themeColor, setThemeColor] = useState(slideColors[0])

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-2">
        {slideColors.map((color) => (
          <button
            key={color}
            title={color}
            className="h-10 w-20 rounded-md opacity-80 hover:opacity-100 transition-opacity cursor-pointer border-none"
            onClick={() => setThemeColor(color)}
            style={{backgroundColor: color}}
          />
        ))}

        <button
          className="h-10 w-20 font-semibold text-white rounded-md opacity-80 hover:opacity-100 transition-opacity cursor-pointer border-none"
          style={{
            background:
              'linear-gradient(to right top, #fff6f2, #ffd4c1, #ffb194, #f98d6b, #f16645, #dc5135, #c63a26, #b12118, #8d2318, #6a2117, #481d15, #281713)',
          }}
          onClick={() =>
            setThemeColor(
              `#${Math.floor(Math.random() * 0xffffff)
                .toString(16)
                .padStart(6, '0')}`,
            )
          }
        >
          Random
        </button>
      </div>

      <p>
        color: <strong>{themeColor}</strong>
      </p>

      <SlideAction color={themeColor}>Slide background</SlideAction>

      <SlideAction color={themeColor} slideType="static">
        Fadein background
      </SlideAction>

      <SlideAction labelType="slide" color={themeColor}>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa non ipsum, pariatur in
        eveniet neque dolores sequi, numquam aspernatur ratione veritatis nemo earum maxime aut
        distinctio repellat dolorum ipsa deleniti!
      </SlideAction>

      <h3>Gradient slide background</h3>
      <SlideAction
        classNames={{
          progress: 'bg-gradient-wave',
        }}
      >
        Slide to see bg color change
      </SlideAction>
    </div>
  )
}

Compact

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis ab, dicta consequatur harum iusto cumque, sunt quia dolor, adipisci commodi repellendus perferendis iste.

compact.tsx

<SlideAction compact />

Styling Elements

classNames and styles are 2 more available options for styling the <SlideAction> component.
See SlideActionStylingSelectors in the Special Types section below for available selectors.

Note

Some examples and demos in the documentation use the styles prop for convenience, but it is not recommended to use the styles prop as the primary means of styling components, as the classNames prop is more flexible and has better performance.

Playground

⚽️

Slide to see progress Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur amet ut repellat quia natus asperiores facere.

Source code

styling.tsx

import {SlideAction} from '@kaiverse/k/ui'

export default function StylingDemo() {
  return (
    <SlideAction
      className="bg-[rgba(225,88,25,0.1)]"
      classNames={{
        label: 'text-[rgb(225,88,25)] font-bold',
        progress: 'bg-gradient-wave',
        dragger: 'bg-gradient-to-r from-purple-500 to-pink-500 [&>span]:animate-spin',
      }}
      color="rgb(225,88,25)"
      icon={<span>⚽️</span>}
      label="Slide to see progress Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur
      amet ut repellat quia natus asperiores facere."
    />
  )
}

allowSwipeAfterEnd

Avoid enabling this flag as much as possible. If you wanna reset the component status, see the Reset section.

By default, users can NOT swipe this component after the action is settled/confirmed. Set allowSwipeAfterEnd to true to disable this behavior.

Accessibility considerations: Act unintentionally

Since an action is a successful action when users dragged/swiped this component all the way to the end.
On that state, if users tap and then release without swiping, <SlideAction> will assume that it is an successful/confirmatory action.
As a result, onSwipeEnd will be triggered.

Successful / confirmatory action count: 0

Can swipe after success

allowSwipeAfterEnd.tsx

<SlideAction allowSwipeAfterEnd />

Special Types

Name	Type	Description
SlideActionOnSwipeEnd	(reset: () => void) => void	Type of onSwipeEnd callback
SlideActionOnChange	(isSuccess: boolean) => void	Type of onChange callback
SlideActionStylingSelectors	'dragger' | 'label' | 'progress'	Available selectors of special styles APIs: classNames, styles.
SlideActionRef	HTMLDivElement & {resetState: () => void;}	<SlideAction> element ref. Call ref.resetState() to reset component status. See the reset section.

<SlideAction> Props

Name	Type	Default	Description
children	ReactNode	—	Will be consider as a label. If provided, label prop will be ignored.
classNames	Partial<Record<SlideActionStylingSelectors, string>>	—	Applies className to related selector element.
styles	Partial<Record<SlideActionStylingSelectors, CSSProperties>>	—	Applies inline styles to related selector element.
icon	ReactNode	Double arrow right	Icon for the swiper.
color	string	--k-slide-action-theme - #1d4ed8	Component theme color. Includes label, slide background, border and the dragger color
label	string	'Slide'
labelType	'default' | 'slide'	'default'	Label effect
slideType	'slide' | 'static'	'slide'	The left behind background color’s effect. 'slide': progress effect (default).
onSwipeEnd	SlideActionOnSwipeEnd	—	Trigger when users swiped all the way to the end. Call the 1st argument to reset the component status. See the reset section.
onChange	SlideActionOnChange	—	Trigger when component’s status changes.
compact	boolean	false	Compact size.
allowSwipeAfterEnd	boolean	false	See the allowSwipeAfterEnd section.