# Shine button
Pill button with a soft light sweep on hover, three variants, three sizes and an arrow that nudges forward.
- Type: component
- Category: Buttons
- Tier: Free
- Dependencies: lucide-react
## Install
```bash
npx shadcn@latest add https://facadeui.com/r/shine-button.json
```
## Usage
```tsx
import { ShineButton } from "@/components/facade/shine-button";
export default function Page() {
return ;
}
```
## Source
```tsx
import * as React from "react";
import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";
export type ShineButtonVariant = "brand" | "solid" | "outline";
export type ShineButtonSize = "sm" | "md" | "lg";
export interface ShineButtonBaseProps {
/** Visual style. Defaults to "brand". */
variant?: ShineButtonVariant;
/** Height and padding scale. Defaults to "md". */
size?: ShineButtonSize;
/** Optional leading icon. */
icon?: React.ReactNode;
/** Show a trailing arrow that nudges forward on hover. */
arrow?: boolean;
className?: string;
children?: React.ReactNode;
}
type ShineButtonAsButton = ShineButtonBaseProps &
Omit, keyof ShineButtonBaseProps> & {
href?: undefined;
};
type ShineButtonAsAnchor = ShineButtonBaseProps &
Omit, keyof ShineButtonBaseProps> & {
href: string;
};
/** Pass `href` to render an ``, otherwise a `