Button UI component for Figma — 1,128 variants

🔘 Component Overview

The Button component in Emvi UI is designed to be one of the most versatile and reusable elements in the design system. It plays a central role in interfaces by enabling actions, navigation, or form submission.

Each button is built on a token-based structure that allows fast customization of colors, sizes, and states without compromising visual consistency. Available variants cover a wide range of use cases: primary, secondary, tertiary, text, icon, and compound buttons.

The preview helps you compare light and dark visual states. Check responsiveness and accessibility when you implement the component in your product.

🧱 Button Types and Hierarchy

The button system in Emvi UI is structured to reflect clear action hierarchies. This ensures users can visually identify the priority of each button based on its context.

Primary: Highlights the main action on a screen or flow. Uses solid color and high contrast.

Secondary: Complements the primary button, suitable for secondary actions. May use outline or less prominent background.

Tertiary: Used for less frequent or alternative actions. Typically appears as plain text with minimal visual weight.

Text Button: For non-critical actions or lightweight UI contexts.

Destructive Buttons: Reserved for critical actions (e.g., delete), using colors and messaging that alert the user.

Each type has its own configuration for background, border, shadow, and typography to ensure system-wide consistency.

📏 Sizes, Spacing, and Scale

Emvi UI includes a range of predefined button sizes, designed to accommodate various hierarchy levels and interface needs. Variants include XS, SM, MD, LG, and XL, each paired with specific font sizes, padding, and line heights.

Internal spacing is calibrated to maintain visual balance—even when adding elements like icons or loaders. This scale ensures proper alignment with other system components such as inputs, cards, or headers.

The spacing system follows Emvi UI's base grid, enabling smooth integration into modular designs and responsive layouts.

⚙️ Interactive States and Behavior

The Button component in Emvi UI includes interaction states designed to enhance user experience and provide clear visual feedback. Use the preview to review how each state looks before implementing the interaction in code.

Hover: Slightly increases background or border contrast to indicate interactivity.

Focus: Adds a visible focus ring for keyboard navigation.

Active: Simulates a press using subtle darkening or shadow change.

Disabled: Lowers opacity, removes interactivity, and maintains sufficient contrast for recognition.

Loading: Displays a centered loading indicator, replacing or accompanying the button label.

All states are responsive and compatible with both light and dark modes.

🖇️ Buttons with Icons and Compound Buttons

Emvi UI supports enhanced buttons through icons and compound content, improving usability and visual communication for key actions. Icons can be placed to the left or right of the label and are automatically aligned based on the button size.

The system allows for:

Icon + text buttons.

Icon-only buttons (for dense or mobile UIs).

Compound buttons with secondary labels, descriptions, or badges.

All icons scale relative to the button size and respect predefined padding, ensuring legibility and consistency. They are also integrated with the token system to maintain color and style synchronization.

♿ Accessibility and Usability

The Figma variants help you plan readable labels, visible focus states, and a clear action hierarchy. Contrast and target size should be checked against your final colors and layout.

A design file does not add keyboard behavior or screen reader support to a product. When implementing these buttons, use native button elements, provide an accessible name for icon-only actions, and test focus, disabled and loading behavior in the finished interface.

🧩 Figma and Tailwind Integration

The Button component in Emvi UI is built for seamless integration with modern design and development tools. In Figma, each button is available as an atomic component and reusable variant (by type, size, state, and icon), linked to global text, color, and effect styles.

The kit supplies the Figma design, not ready-made Tailwind button code. Developers can map its visual tokens and states to their own Tailwind classes and components, then verify the result across breakpoints and input methods.

Document that mapping for the team so design changes can be carried into the implemented interface.

✅ Best Implementation Practices

To maintain the visual and functional consistency of the button system in Emvi UI, the following best practices are recommended:

Use appropriate semantic variants based on action hierarchy.

Avoid overcrowding buttons with multiple icons or overly long text.

Use disabled states only when the action must not be performed—not as an indicator of temporary inactivity.

Include loading indicators on asynchronous actions to improve perceived responsiveness.

Ensure all buttons have accessible labels (aria-label) when content is not text-based.

These practices enhance the user experience, reinforce accessibility, and support maintainability across the system.