# Floating Button

## Essence

Floating Button is the fixed, high-emphasis contact CTA for the homepage.

## Hook

Use when the page needs a persistent contact action that sits above content without being part of the page flow.

## Internal Rules

- Owns its accent background, pill radius, original drop shadow, fixed placement, hover dimming, and focus treatment.
- Uses `--color-accent` for the background.
- Uses intrinsic pill geometry instead of Corner Radius tokens.
- Uses Button typography.
- Do not recreate this treatment with local page overrides.

## Use When

- Rendering the homepage contact CTA.

## Do Not Use When

- Rendering inline navigation links.
- Rendering repeated card or list actions.
- The action should sit in normal document flow.

## Code Paths

- `packages/design-system/src/components/FloatingButton.astro`
- `apps/portfolio-site/src/pages/index.astro`