Fieldbook
Sign in

Buttons

Slanted shutter button

Two slanted accent panels drop from above and below to close over the pill on a diagonal seam while the label rolls once and inverts through the fill.

Using Slanted shutter button

Two slanted accent panels drop from above and below to close over the pill on a diagonal seam while the label rolls once and inverts through the fill.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: label, accent, skew, duration, radius

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Skewed blade invert
2618Skewed blade invertButtonsA dark rounded button that inverts as a slanted accent blade opens outward from its center on hover or keyboard focus.
Skewed shutter button
2431Skewed shutter buttonButtonsA button whose two sheared panels park outside its edges and drive inward on hover, closing behind the label on a diagonal seam.
Arrow wipe button
2683Arrow wipe buttonButtonsA pill button whose accent plate, cut into an arrowhead, sweeps in from the left on hover and inverts the label letter by letter as its point crosses.
Color swap play button
1849Color swap play buttonButtonsAn uppercase play pill that trades its ground and text colors on hover, lifting as its colored glow turns dark.
Comb wipe invert button
2542Comb wipe invert buttonButtonsTwo interlocking striped combs slide in from above and below to cover a black pill, inverting the label as they pass.
Diagonal shutter fill button
2141Diagonal shutter fill buttonButtonsAn outlined button that fills when two tilted blades swing in from opposite sides, straighten out mid flight and meet in the middle.