Fancy Button

A skeuomorphic primary button with an inner highlight and a crisp ring. Use it for the main call to action on a marketing page.

import { SkeuomorphicButton } from '@orvain/react';
 
<SkeuomorphicButton label="Fancy button" />
<SkeuomorphicButton variant="secondary" intent="brand" label="Continue" />
<SkeuomorphicButton pill size="md" label="Get started" />
<SkeuomorphicButton as="a" href="/pricing" label="See pricing" />

Add a neutral primary Orvain Fancy Button, labelled “Button Label”, size L, a chevron on each side.

Orvain MCPIncluded with the library

When to use#

For the hero call to action, pricing and sign-up.
Once per screen. Two fancy buttons compete with each other.

When not to use

Use a Button inside product UI, forms and dialogs.

Anatomy#

1Container

The Button's geometry: 60px, 32px sides (42px as a pill), 16px radius.

2Rim

A 2px edge outside the box: #070707 on Neutral, the intent's colour elsewhere.

3Highlight

A 1px inner light along the top edge (white at 12%).

4Lift

Four stacked drop shadows, from 1.5px to 16px, at 2–8% black.

States#

Default

Raised: rim, highlight and lift.

Hover

The fill steps darker; the lift stays.

Focused

A ring outside the rim, for keyboard focus only.

Pressed/Clicked

Lies flat: the rim and lift go and the fill darkens again.

Disabled

Flat, #f2f2f2 and #cbcbcb. Inert.

Source#

Preview – final code pending

The Fancy Button is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published