Button

Overview

The Button component is a styled, accessible button that extends our primitive button with three visual variants and four size options. Use buttons to trigger actions or navigate users through your application.

Variants

The Button component offers three distinct variants for different levels of visual emphasis and hierarchy: primary, sedondary, and tertiary.

When to use each variant

• Primary: Use for the main call-to-action on a page or in a form. There should typically be only one primary button visible at a time.
• Secondary: Use for secondary actions that are important but not the main focus. Good for alternative options or less critical actions.
• Tertiary: Use for tertiary actions with minimal visual weight. Ideal for inline actions or when you need many buttons without overwhelming the interface.

Sizes

Four size options are available to each variant to fit different contexts and layouts: lg, md, sm, and xs.

Icons

Buttons support both leading and trailing icons to enhance visual communication.

Interactive States

All button variants support hover, pressed, focus and disabled states with distinct visual highlights. Interact with the examples below to see each state.

Import

import { Button } from '@im/integral/components/styled';

Props

Accessibility

• All buttons are keyboard accessible
• Support for focus states
• Proper ARIA attributes when disabled
• Can be rendered as different elements using the asChild prop for semantic HTML

Best Practices

1. One primary action per view: Limit primary buttons to one per screen or section to maintain clear hierarchy
2. Clear labels: Use action-oriented, concise labels (e.g., "Save Changes" instead of "OK")
3. Icon usage: Use icons to reinforce meaning, not replace text labels for important actions
4. Size consistency: Maintain consistent button sizes within the same context
5. Loading states: Consider adding loading states for async operations (can be implemented with icons)