# Shine button (goodtabs UI)

The primary pill with a 1px top shine and a soft shadow, for hero and page actions.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/shine-button.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/shine-button`

## Usage

```tsx
import { ShineButton } from "@/components/ui/shine-button"

<ShineButton size="lg">Get started</ShineButton>
<ShineButton asChild><a href="/docs">Read the docs</a></ShineButton>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| size | `"default" | "lg"` | `"default"` | 32px, or 44px with 16px text for hero actions. |
| asChild | `boolean` | `false` | Render the child element, for example an anchor, with the styles. |

## When to use

- The one primary action in a hero, a pricing card or a form
- Next to an outline or ghost button that carries the secondary action
- Where the plain Button looks flat on a dark surface and needs a hint of lift

## When not to use

- For more than one action in a group; one shine button per view
- In dense toolbars and tables, where the plain Button is enough
- For destructive actions, which use the destructive token

## Notes for agents

- It is shadcn's default Button plus an inset top highlight, so every Button prop applies except variant
- The shine reads the --highlight CSS variable and falls back to nothing; define --highlight in your theme to see it
- Hover is the Button's bg-primary/90; there is no transform, so it sits still next to other buttons
- lg is 44px with 16px text, meant for heroes only; default is the 32px control height

Docs: https://ui.goodtabs.co/components/shine-button