Variants

Different configurations and states available for button components to accommodate various use cases, user interactions, and visual requirements. These variants provide configuration flexibility in appearance, behavior, and hierarchy while maintaining design consistency across the system.

Close Button

Interactive elements that trigger actions or operations when activated by users. These components serve as the primary action triggers within interfaces, adapting their appearance and behavior based on context, importance, and current state to provide clear visual feedback and maintain consistent user experience across all interface contexts.

Context Variants

Visual styles and semantic meanings that communicate button purpose and importance within the interface hierarchy. These variants determine the button's prominence, color treatment, and contextual messaging to guide user attention and convey action significance.

Default

Standard button styling for general-purpose actions that don't require special emphasis. Use for non-critical interactions like opening dialogs, toggling options, or secondary navigation elements.

Alternate

Alternative styling variant optimized for different backgrounds or emphasized contexts. Use as a visual alternative to default styling in sections with alternate background.

Primary

Represents the main action a user should take on a page. Use for high-priority actions like submitting forms, initiating critical processes, or primary call-to-action elements that drive core user tasks.

Secondary

Secondary action styling for important but less critical actions that complement primary actions. Provides supplementary actions, or when offering multiple actions alongside a primary action.

Neutral

Neutral styling variant for tertiary actions or low-emphasis interactions when visual hierarchy isn't important. Provides functional access to less prominent features.

Danger

Destructive action styling that signals potentially harmful or irreversible operations. Use for actions that involve deleting critical processes, or any operation that requires careful consideration.

Success

Positive confirmation styling for completed and success states. Use for providing feedback, completing transactions, or confirming successful operations that provide positive user feedback.

Warning

Cautionary styling variant that signals attention-required actions. Use for operations that involve warnings, requiring user confirmation, or processes with potentially risky operations.

Info

Informational styling variant used for knowledge-based actions and feature access. Use for accessing detailed information, opening help dialogs, or initiating informational content.

Black

High-contrast styling variant. Best for maximum visual impact in special contexts like landing pages or special contexts. Use during in reading page designs, or when contrast-rich styling is needed.

White

Contrast-reversed styling variant that works within a dark environment. Use for prominent actions requiring maximum contrast in special contexts like dark backgrounds. High contrast styling is needed for maximum light styling scenarios.

Size Variants

Different size options for close buttons to accommodate various input requirements and space constraints. These variants maintain proportional relationships while adapting to different design contexts and space controls.

Large

Expanded button size designed for high-visibility actions or important actions that benefit from additional emphasis. Use in prominent contexts, modal actions, or when enhanced prominence is required.

Medium

Standard button size providing measurements for most button implementations. Use as the default for primary, secondary, and informational actions where optimal visibility and usability are required.

Small

Compact button size optimized for dense layouts and secondary actions. Use in toolbar contexts, inline actions, or when available button space is limited to fit within larger context.

State Variants

Interactive states that effect user interaction quality and feedback based on current user ability and system conditions. These variants communicate to the user's availability and guide users through Chassis GUI-compatible user navigation.

Idle

Represents the default appearance of a button when it is not being interacted with. Passive appearance indicates button is available for interaction.

Hover

Provides visual feedback when a user's cursor is over a button, indicating that it is interactive. Enhanced visual styling signals interactivity and guides user attention.

Press

Indicates that a button is currently being pressed or activated. Active styling provides immediate feedback during user interaction.

Disabled

Shows that a button is not currently interactive due to its disabled state. Reduced visual prominence maintains interface structure while marking buttons as unavailable while maintaining interface structure.