Interactive button component with multiple variants, sizes, and states for various user actions in government applications.
The default button with primary variant and medium size for main actions.
Different button styles for various use cases. Use primary for main actions, secondary for less important actions, outline for subtle actions, ghost for minimal styling, danger for destructive actions, and link for text-based navigation.
Four different sizes to match your interface needs. Small for compact spaces, medium for general use, large for prominent actions, and extra large for hero sections.
Loading and disabled states provide feedback during async operations and prevent user interaction when necessary.
Buttons can include icons to provide visual context. Icons can be positioned on the left or right side of the text.
A real-world example showing buttons in a government application context with bilingual support.
Submit forms, create applications, confirm payments, save data
Cancel operations, view details, print documents, reset forms
Delete applications, cancel appointments, remove documents
Navigate between steps, go to external links, open modals
Detailed specifications and characteristics of the Button component for implementation guidance.
| Specification | Details | Purpose & Usage |
|---|---|---|
| Component Type | Interactive Element | Triggers actions and navigates users through workflows |
| Complexity Level | Low | Simple to implement and customize, suitable for basic UI needs |
| Variant Options | Primary, Secondary, Outline, Ghost, Danger, Link | Multiple styles to establish visual hierarchy and context |
| Size Options | Small, Medium, Large, Extra Large | Adapts to different interface contexts and importance levels |
| State Management | Default, Hover, Focus, Loading, Disabled | Provides clear feedback for user interactions and system states |
| Icon Support | Left/Right positioning, Optional | Enhances meaning and improves visual recognition |
| Accessibility Features | Keyboard navigation, Focus indicators, Screen reader support | Ensures usability for all citizens including those with disabilities |
| Language Support | English, Bengali (বাংলা) | Bilingual text support for government applications |
| Design System | Color tokens, Typography scale, Spacing units | Consistent with CivixUI design principles and government branding |
| Use Cases | Form submission, Navigation, Actions, Downloads | Primary interface element for user-initiated actions in government services |