Svelte 5 Action Button – Premium Tactile Control

Premium action button with Braun ET66 calculator-inspired design. Features gradient shading, satisfying press animation, and focus states.

braun aesthetic UISvelte UI librarySvelte 5 type safe props

Preview

Use Case

Inspired by the Braun ET66 calculator, this button features a satisfying press animation and gradient shading that creates depth. The signal orange color demands attention for primary actions.

Industry Applications

Primary Action Trigger (general)

Inspired by the iconic Braun ET66 calculator, this button demands attention for primary actions. The gradient shading creates physical depth.

  • • Signal orange color for maximum visibility
  • • Press animation provides tactile feedback
  • • Gradient shading creates 3D depth effect
  • • Focus ring for accessibility compliance

Props API

Button component props
PropTypeDefaultDescription
label string'ACTION'Button text content
onclick () => void—Click handler function
class string—Additional CSS classes

Related Components

ToggleToolbar

See it in Action

Explore the Button in an interactive dashboard environment.

Customize in Showroom

More Inputs Components

Toggle

Designed for high-contrast visibility in Logistics control panels, this Svelte 5 switch uses strict ARIA roles for accessibility.

Input

Designed to feel carved into the interface rather than sitting on top, this input uses inner shadows to create depth.

Select

This custom select provides a consistent look across browsers while maintaining full keyboard accessibility.