Skip to content
Fieldbook
Menu
Sign in
EN

Buttons

Slab Lift Icon Button

Slab Lift Icon Button: A translucent icon tile that rises off a solid slab of light on hover, then slams back down and swallows the slab when it is pressed.

Using Slab Lift Icon Button

Slab Lift Icon Button uses the inline preview frame with a dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
accentcolor#9BE15DNo additional limit in the metadata.
liftnumber6From 2 to 14; step 1
tintnumber0.07From 0 to 0.3; step 0.01
sizenumber44From 32 to 64; step 2
radiusnumber5From 0 to 16; step 1
Which frameworks are available for Slab Lift Icon Button?

Slab Lift Icon Button is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Slab Lift Icon Button depend on?

The React metadata lists these npm dependencies beyond React: clsx.

What accessibility details are visible in Slab Lift Icon Button?

The React source for Slab Lift Icon Button includes: native elements (button); attributes and handlers (aria-hidden, aria-label, onKeyDown, onKeyUp); key comparisons (Enter, Space). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Slab Lift Icon Button handle reduced motion?

The source scan found no direct useReducedMotion() or matchMedia preference read in Slab Lift Icon Button's index.tsx. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Chevron flip tile component, a Fieldbook UI component in Buttons.
1936Chevron flip tileButtonsA square icon tile whose chevron hinges flat and reopens pointing the other way, each half pivoting on the joint where they meet.
Still of the Departing send button component, a Fieldbook UI component in Buttons.
2563Departing send buttonButtonsA send button that flies its glyph off the right edge and empties its label on hover, revealing a second line over a spreading accent wash.
Still of the Floating download pill component, a Fieldbook UI component in Buttons.
1857Floating download pillButtonsA fully rounded pill that appears to hover above the page and settles closer to it as you hover and press.
Still of the Graphite Slab CTA component, a Fieldbook UI component in Buttons.
2669Graphite Slab CTAButtonsA fixed-width dark slab button with a subtle graphite ramp that lifts on hover and carries a thin accent rule along its bottom edge.
Still of the Growing ledge button component, a Fieldbook UI component in Buttons.
2566Growing ledge buttonButtonsA solid accent button resting on a darker bottom ledge that thickens and lifts on hover, then thins and sinks under a press.
Still of the Invert and lift button component, a Fieldbook UI component in Buttons.
2700Invert and lift buttonButtonsA tall outlined button that inverts to a solid fill and lifts a couple of pixels on hover, then settles flat again when pressed.