Schaufenster

buttons · 8 Sections

buttons/button-core

React button component with 5 variants, 3 sizes, icon slots, a loading to success morph and a springy press.

alle · standard · freedesignmd · Insel · 2 Slots

Button Core — ueberschrift (h2, 72 Zeichen)

Button Core — vorspann (p, 240 Zeichen)

buttons/hold-to-confirm

Hold to confirm button for destructive actions: progress fills while you press, early release cancels, Space works too.

alle · standard · freedesignmd · Insel · 2 Slots

Hold to Confirm — ueberschrift (h2, 72 Zeichen)

Hold to Confirm — vorspann (p, 240 Zeichen)

Press and hold for 1.5 seconds, or hold the Space key.

buttons/icon-button-group

Accessible icon button toolbar with toggles, tooltips, shortcuts and roving focus, for editors and tools.

alle · standard · freedesignmd · Insel · 2 Slots

Icon Button Group — vorspann (p, 240 Zeichen)

buttons/magnetic-button

Magnetic button for React that leans toward your cursor on a spring, with the label drifting further than the shell.

alle · standard · freedesignmd · Insel · 2 Slots

Magnetic Button — vorspann (p, 240 Zeichen)

buttons/pill-tag-button

Filter chips for React: selectable pill tags with count badges and a check that slides in on a spring.

alle · standard · freedesignmd · Insel · 2 Slots

Pill Tag Button — vorspann (p, 240 Zeichen)

buttons/segmented-control

React segmented control with a sliding thumb on a spring, badges and arrow-key selection. A radio-group toggle.

alle · standard · freedesignmd · Insel · 2 Slots

Segmented Control — vorspann (p, 240 Zeichen)

buttons/shimmer-button

Shimmer button for React: a dark capsule with a travelling light sweep and rotating border glow, built for one main CTA.

alle · standard · freedesignmd · Insel · 2 Slots

Shimmer Button — vorspann (p, 240 Zeichen)

buttons/split-button

React split button: a primary action fused to a dropdown menu, with keyboard navigation, type-ahead and auto-flip.

alle · standard · freedesignmd · Insel · 2 Slots

Split Button — vorspann (p, 240 Zeichen)