Skip to main content
A beautiful 3D raised button component with a raised appearance, customizable colors, and automatic text contrast adjustment for optimal readability.

​
Installation

    ​
    Usage

    import { RaisedButton } from "@/components/ui/raised-button";

export default function Example() {
  return <RaisedButton>Click me</RaisedButton>;
}

    ​
    Custom Colors

    Use the color prop to apply custom colors. The component automatically adjusts text color for optimal contrast: 
    <RaisedButton color="#3b82f6">Blue</RaisedButton>
<RaisedButton color="#ef4444">Red</RaisedButton>
<RaisedButton color="#10b981">Green</RaisedButton>
<RaisedButton color="#8b5cf6">Purple</RaisedButton>

    ​
    Sizes

    <RaisedButton size="sm">Small</RaisedButton>
<RaisedButton size="default">Default</RaisedButton>
<RaisedButton size="lg">Large</RaisedButton>

    ​
    Props

    ​
    variant
    string
    default:"default"
    The button variant. Currently only supports default.
    ​
    size
    'sm' | 'default' | 'lg' | 'icon'
    default:"default"
    The size of the button.
    • sm: Small button (h-9, px-3)
    • default: Default size (h-10, px-4)
    • lg: Large button (h-11, px-8)
    • icon: Square icon button (h-10, w-10)
    ​
    color
    string
    Custom color for the button. Accepts hex colors, rgb, hsl, or CSS color names. The component automatically adjusts text color for optimal contrast.
    ​
    className
    string
    Additional CSS classes to apply to the button.
    ​
    disabled
    boolean
    default:"false"
    Whether the button is disabled.

    ​
    Features

    • 3D Raised Appearance: Elegant shadow and gradient effects create a raised, tactile look
    • Dynamic Text Contrast: Automatically calculates the optimal text color (black or white) based on background luminance
    • Custom Colors: Support for hex, RGB, HSL, and CSS color names
    • Accessible: Proper focus states and keyboard navigation
    • Responsive: Subtle scale animation on click
    • Dark Mode: Automatically adapts to dark mode themes

    ​
    Accessibility

    • Full keyboard navigation support
    • Proper focus indicators with focus-visible
    • Disabled state handling
    • Semantic HTML button element
    • High contrast text automatically calculated

    Build docs developers (and LLMs) love

    Get started for freeTalk to us