Components

SwipeActions

SwipeActions adapts SwiftUI's swipe-revealed row actions into an explicit, accessible web row wrapper. On the web, actions are revealed with a toggle instead of relying on touch-only gestures.

Examples

Default

Preview unavailable for this example in the static docs build.

Show code

<SwipeActions
      actions={[
        { label: 'Flag' },
        { label: 'Archive' },
      ]}
    >
      <div style={{ padding: 16, border: '1px solid var(--sw-color-gray-4, #d1d5db)', borderRadius: 14 }}>
        Project update
      </div>
    </SwipeActions>

Variants

Preview unavailable for this example in the static docs build.

Show code

<SwipeActions
      actions={[
        { label: 'Pin' },
        { label: 'Mark unread' },
      ]}
      edge="leading"
      defaultOpen
    >
      <div style={{ padding: 16, border: '1px solid var(--sw-color-gray-4, #d1d5db)', borderRadius: 14 }}>
        Conversation row
      </div>
    </SwipeActions>

Variants

Preview unavailable for this example in the static docs build.

Show code

<SwipeActions
      actions={[
        { label: 'Delete', tint: 'destructive' },
      ]}
      defaultOpen
    >
      <div style={{ padding: 16, border: '1px solid var(--sw-color-gray-4, #d1d5db)', borderRadius: 14 }}>
        Draft message
      </div>
    </SwipeActions>

API

Prop	Type	Required	Description
`actions`	`ISwipeActionItem[]`	Yes	No description yet.
`edge`	`'leading' \| 'trailing'`	No	No description yet.
`open`	`boolean`	No	No description yet.
`defaultOpen`	`boolean`	No	No description yet.
`onOpenChange`	`(open: boolean) => void`	No	No description yet.

Inherits additional props from IBaseComponent.

Overview

SwipeActions adapts SwiftUI's swipe-revealed row actions into an explicit, accessible web row wrapper. On the web, actions are revealed with a toggle instead of relying on touch-only gestures.

Notes

Use edge="leading" to place actions before the row content.
Use controlled open state when a surrounding list needs to coordinate which row is expanded.
Expanded actions close on Escape or when focus/pointer interaction moves outside the row, matching the temporary nature of swipe-revealed actions.

Stepper

Stepper is a control for incrementing or decrementing a numeric value. It supports both controlled and uncontrolled usage and exposes semantic increment/decrement buttons.

SymbolEffect

SymbolEffect adapts SwiftUI's symbol animation modifiers into an explicit wrapper component for the web.

SwipeActions

Examples

API

Overview

Notes

On this page