Interactive elements that trigger actions, navigate pages, or submit forms. Built with accessibility, responsiveness, and consistent design tokens.
Core visual styles for different contexts and hierarchy levels.
Scale buttons to match surrounding UI density and touch targets.
Adjust border radius to match your design system's geometry.
Visual feedback for interaction, loading, and disabled contexts.
Compact controls for toolbars, modals, and action menus.
Join related actions into a unified control with shared borders.
Copy the markup or import the component class from your project.
// Basic Button
<button class="wb-btn wb-btn--primary">Get Started</button>
// With Icon & Loading State
<button class="wb-btn wb-btn--secondary wb-btn--loading"
disabled>Processing</button>
// Component Import (JS/TS)
import { Button } from '@webui/core';
export default function ActionPanel() {
return (
<Button variant="primary" size="lg" icon={rocket}>
Deploy to Production
</Button>
);
}