Pressable Feedback

Usage

Anatomy

Import the PressableFeedback component and access all parts using dot notation.

import { PressableFeedback } from "@thenamespace/uikit";

<PressableFeedback>
  <PressableFeedback.Highlight />
  <PressableFeedback.Ripple />
  <PressableFeedback.HoldConfirm />
  <PressableFeedback.ProgressFeedback />
</PressableFeedback>;

Comparison

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

Disabled

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

Hold Confirm Callback

"use client";

import { useState } from "react";

import { PressableFeedback } from "@thenamespace/uikit";

Hold Confirm Durations

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

Hold Confirm Sweep

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

Pressable Cards

NEO

Home Robot

Available soon

Get notified

Notify me

IH

Indie Hackers

148 members

J

By John

AB

AI Builders

362 members

M

By Martha

Bridging the Future

Today, 6:30 PM

Avocado Hackathon

Wed, 4:30 PM

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Avatar } from "@thenamespace/uikit/avatar";
import { Button } from "@thenamespace/uikit/button";

Expand code

Progress Feedback Callback

"use client";

import { useState } from "react";

import { PressableFeedback } from "@thenamespace/uikit";

Progress Feedback Durations

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

Progress Feedback No Reset

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

Progress Feedback Sweep

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

Standalone Highlight

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { ArrowRight01Icon, UserIcon } from "@thenamespace/uikit/icons";
import { HugeiconsIcon } from "@thenamespace/uikit/icons";

Standalone Ripple

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { ArrowRight01Icon, UserIcon } from "@thenamespace/uikit/icons";
import { HugeiconsIcon } from "@thenamespace/uikit/icons";

With Highlight

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

With Hold Confirm

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

With Progress Feedback

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

With Ripple

"use client";

import { PressableFeedback } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

CSS Classes

Base Classes

• .pressable-feedback - Base pressable container with relative positioning and overflow hidden

Element Classes

• .pressable-feedback__highlight - Opacity-based press overlay
• .pressable-feedback__ripple - M3-style radial ripple container
• .pressable-feedback__ripple-surface - Ripple animation surface with ::before (hover) and ::after (press) pseudo-elements
• .pressable-feedback__hold-confirm - Clip-path hold-to-reveal overlay
• .pressable-feedback__progress-feedback - Clip-path click-to-progress overlay

Interactive States

• Focus visible: :focus-visible or [data-focus-visible="true"] on .pressable-feedback (focus ring)
• Disabled: :disabled or [aria-disabled="true"] on .pressable-feedback (reduced opacity, no pointer events)
• Hover: :hover or [data-hovered="true"] on parent activates .pressable-feedback__highlight opacity
• Pressed: :active or [data-pressed="true"] on parent activates highlight pressed opacity

Data Attributes

• [data-sweep="right|left|down|up"] on hold-confirm and progress-feedback - Clip-path sweep direction
• [data-holding="true"] on .pressable-feedback__hold-confirm - Currently being held
• [data-complete="true"] on hold-confirm/progress-feedback - Action completed
• [data-progressing="true"] on .pressable-feedback__progress-feedback - Progress is active

CSS Variables

• --pressable-feedback-highlight-color - Highlight overlay color (default: currentColor)
• --pressable-feedback-highlight-opacity - Hover opacity (default: 0.08)
• --pressable-feedback-highlight-pressed-opacity - Pressed opacity (default: 0.12)
• --pressable-feedback-ripple-color - Ripple color (default: currentColor)
• --pressable-feedback-ripple-hover-opacity - Ripple hover opacity (default: 0.08)
• --pressable-feedback-ripple-pressed-opacity - Ripple pressed opacity (default: 0.12)
• --pressable-feedback-hold-confirm-duration - Hold duration (default: 2000ms)
• --pressable-feedback-hold-confirm-release-duration - Release snap-back duration (default: 200ms)
• --pressable-feedback-progress-feedback-duration - Progress duration (default: 2000ms)
• --pressable-feedback-progress-feedback-release-duration - Reset snap-back duration (default: 300ms)

API Reference

PressableFeedback

The root pressable container. Renders a button element by default.

Also supports all native button HTML attributes.

PressableFeedback.Highlight

Opacity-based hover/press overlay. No additional props beyond standard div attributes.

PressableFeedback.Ripple

M3-style radial ripple effect.

PressableFeedback.HoldConfirm

Clip-path hold-to-reveal overlay.

PressableFeedback.ProgressFeedback

Clip-path click-to-progress overlay (auto, no hold required).