Bubble Up Button

Use Bubble Up Button for a small action that benefits from a visible hover response. The text remains readable while the background surface moves through the button.

Preview

Reduce motion:Off

Inspect

Installation

Motion

npx shadcn@latest add @sona-ui/bubble-up-button

Basic usage

bubble-button.tsx

import BubbleUpButton from "@/components/ui/bubble-up-button/bubble-up-button";
 
export function BubbleButton() {
return <BubbleUpButton>View project</BubbleUpButton>;
}

Examples

Pass button props for form behavior, disabled state, and event handlers. Use motionControls only when the default response does not fit the surrounding interaction.

Usage


export default function BubbleUpButtonExample() {
  return <BubbleUpButton>Hover me!</BubbleUpButton>;
}

API

Property	Type	Default	Description
`children`	`ReactNode`	`—`	Content to display inside the button
`motionControls`	`MotionConfigProps`	`—`	Motion configuration for animations
`className`	`string`	`—`	Additional CSS classes

Accessibility

Use a visible label that states the action. The hover effect is supplemental, so the button remains usable with keyboard and touch input.

Styling

Apply className to match the surrounding surface and text treatment. Reduced-motion preferences remove the animated response.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI