Buttons are fundamental interactive elements that allow users to trigger actions, submit data, or navigate. They are designed to clearly communicate a possible action and provide immediate feedback. In Lighthouse, buttons are styled to be consistent with the QubicaAMF brand and ensure a clear user experience.

When to Use ​

• For the most important calls to action on a page (e.g., "Submit Form," "Save Changes," "Create New Item").
• For secondary actions that are still important but not the primary focus (e.g., "Cancel," "View Details," "Reset Filters").
• When an action needs to be clearly distinguishable and inviting to click.
• For navigation that results in an action or state change (e.g., "Proceed to Checkout," "Go to My Settings").

When Not to Use / Alternatives ​

• For simple navigation between pages where no action is performed (use a Link component or a standard hyperlink instead).
• When there are numerous actions within a small space, which might lead to a cluttered interface (consider a Dropdown Menu or Action Sheet).
• For displaying static information that doesn't trigger an event.

Component Anatomy ​

A Lighthouse Button typically consists of:

• Button Container: The main clickable area that forms the button's shape and background.
• Label Text: The text displayed on the button, clearly describing the action it performs.
• Icon (Optional): An icon can be placed before or after the label text to provide additional visual context or save space in icon-only buttons.

Variations and States ​

Stylistic variations ​

Lighthouse buttons come in several styles to suit different levels of emphasis and use cases.

• Primary Button:
  • Used for the most important action on a screen or within a section. There should typically be only one primary button visible at a time in a given context.
  • Background Tokens: button-primary.btn-primary-bg (Value: {theme.primary}), button-primary.btn-primary-hover-bg (Value: {primary-var.q-primary-darker})
• Secondary Button:
  • Used for actions of secondary importance, offering an alternative to the primary action or for less critical operations.
  • Background Tokens: button-secondary.btn-secondary-bg (Value: {theme.secondary}), button-secondary.btn-secondary-hover-bg (Value: {secondary-var.q-secondary-darker})

• Outline Primary Button:
  • A less visually prominent version of the primary button. It typically has a transparent background with a colored border and text.
  • Border Tokens: Based on components/buttons/border-primary (e.g., btn-border-primary color uses {button-primary.btn-primary-bg})
• Outline Secondary Button:
  • A less visually prominent version of the secondary button.
  • Border Tokens: Based on components/buttons/border-secondary (e.g., btn-border-secondary color uses {button-secondary.btn-secondary-bg})

Sizes ​

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

States ​

• Default: The button's normal, interactive resting state.
• Hover: Visual feedback when the user's cursor hovers over the button (e.g., using *-hover-bg tokens).
• Focus: Visual feedback when the button is highlighted, typically via keyboard navigation or a click (e.g., using f-btn-primary-focus-box-shadow or f-btn-secondary-focus-box-shadow tokens).
• Active: Visual feedback when the button is being pressed or clicked. (Specific styling for this state, like a slightly darker background or inset shadow, would typically be defined by developers based on hover states or additional tokens if available).
• Disabled: Indicates the button is not currently interactive. Visually styled with reduced opacity.
  • Opacity Token: btn-disabled-opacity (Value: {q-opacity-50})

Touch Button ​

Touch buttons are specialized buttons designed for touch interfaces with specific color variants and states. They include primary and secondary variants with outline options.

Touch Button Outline ​

Touch Button States ​

Touch Button with Icons ​

Touch buttons support icons, text, or both. You can use any icon library.

Icon + Text ​

Icon Only ​

Icon left ​

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Icon only ​

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button Group ​

The Button Group component combines multiple Lighthouse Buttons into a single, visually connected series on one line. This is useful for grouping related actions or options, presenting them as a cohesive unit rather than as separate, spaced-out buttons. Button groups can be arranged horizontally (default) or vertically.

Primary ​

Default ​

Outline ​

Primary Sizes ​

Button groups derive their overall size from the size of the Lighthouse Button components placed within them. Consistent button sizing within a group is recommended.

Secondary ​

Default ​

Outline ​

Secondary Sizes ​

Toolbar ​

Multiple Button Groups can be combined, often with other input elements, to form a more complex Toolbar pattern.

Block Buttons ​

Block buttons span the full width of their parent container. Use the w-100 utility class or wrap buttons in a d-grid container.

QButton Props ​

QTouchButton Props ​

Events ​

Slots ​

Accessibility ​

• Buttons use native <button> semantics
• aria-disabled when disabled
• aria-pressed for toggle buttons
• Keyboard: Tab to focus, Enter/Space to activate
• Touch targets meet 44px minimum size (QTouchButton)