# Button > The base button, pressed like a key into a warm surface. Components · Actions · Free · https://obsydeui.com/components/button The default secondary is glass: at rest a faint diagonal sheen warming toward bone, a fine generated grain and a barely-there glass edge; on hover, or keyboard focus, it floods to bone with a soft halo while the label and icon invert to near-black in step with the fill. Primary is solid bone, ghost is bare text. On press it sinks on a spring, its top light gives way to a faint inner shadow, and a soft bloom of heat gathers inside it under the finger (on flooded glass the bone also darkens a touch and the halo pulls in); on release it springs back with a hair of overshoot while the bloom spreads and cools. Keyboard presses land in the centre. Takes an optional leading icon in currentColor and can stretch full width. Loading crossfades the label to a small comet spinner in the same box, so the width never moves, and announces itself. The demo shows primary, secondary and ghost, and a pair of social sign-in buttons; Loading on click simulates work. ## Install ```bash npx shadcn@latest add https://obsydeui.com/r/button.json ``` Files land in `components/obsyde/ember/button/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components. ## Usage ```tsx import { Button } from '@/components/obsyde/ember/button/Button'; export function Example() { return (