Button

Buttons are used to perform a predetermined action (e.g. Submit, Close) or toggle a state (e.g., Expand, Collapse, Activate, Deactivate).

• Use Icon Buttons for actions that can be easily represented by an icon without text or when space is limited.
• Used inside: Input-Group

Implementation Guidelines / Accessibility

Implementation Guidelines

• Use the <button> tag for interactive elements and <a href="#"> for navigation.
• The HTML Button element comes with lots of inbuilt functionality, like submitting forms, which can be disabled with type="button".
• Using an HTML button means it can be reached by the tab key and activated with both a mouse and a keyboard automatically just by adding an onclick event.
• Accessibility: Every icon inside a button should contain a aria-hidden="true" attribute.

Disabled State

• Attribute vs. Class: For functional buttons, always use the HTML disabled attribute. This ensures the button is not only visually grayed out but also non-interactive for mouse, keyboard, and screen reader users.
• The .-disabled Class: Use the .-disabled modifier class specifically when you need to style a non-button element (like an <a> tag) as a disabled button, though using a <button> with the attribute is preferred for accessibility.
• Accessibility: Disabled buttons are often skipped by screen readers. Ensure that the context of why a button is disabled is clear to the user (e.g., through validation messages elsewhere on the page).

Button Size Modifiers

Preview	CSS Classes	HTML
	c-btn	<button class="c-btn">Default Button</button>
	c-btn -small	<button class="c-btn -small">Small Button</button>

WARNING

Avoid mixing different button sizes within the same row or flex-container unless specifically required by the design hierarchy.

Button Style Reference

This table provides a comprehensive overview of text-based button variations, comparing their active states with their disabled counterparts.

Preview (Active)	Preview (Disabled)	CSS Modifier	Description
		.-primary	Main brand color for high-priority actions.
		.-primary-outline	Bordered version of the primary style.
		.-primarylight	Subtle background tint using the primary palette.
		.-secondary	Alternative brand color for secondary feature sets.
		.-secondary-outline	Bordered version of the secondary style.
		.-light	Neutral gray style for low-emphasis utility controls.
		.-inverted	High contrast style for dark or saturated backgrounds.
		.-white -flat	Plain white button with no shadow or border.
		.-link	Removes background/border to mimic text link behavior.
		.-link -flat	Cleanest link style without extra hover box-shadow.
		.-link -remove	Gray text link style with red hover color.

Button State Modifiers

Preview (Active)	.-has-border	Preview (Disabled)	CSS Modifier	Description
			.-success	Indicates a positive outcome, completion, or "safe" action.
			.-warning	Used for cautionary actions that may have unintended side effects.
			.-error	Highlights destructive actions, critical failures, or danger.
-			.-disabled	A utility class to visually gray out an element when the disabled attribute isn't enough.

Button with Inline Icon Reference

This table demonstrates how to manually include FontAwesome icons (<i> or <span>) within a button while using alignment modifiers to handle spacing and positioning.

Preview	CSS Modifiers	Description
	.-icon-right	Positions a manual icon to the right of the text with appropriate margin.
	.-icon-left	Positions a manual icon to the left of the text with appropriate margin.

Implementation Notes

• Manual Icons: Unlike the -icon-arrow class (which uses pseudo-elements), these buttons require an explicit HTML tag like <i class="fas fa-lock" aria-hidden="true"></i> inside the button.
• Markup Order: For best results, place the icon tag after the text for -icon-right and before the text for -icon-left.
• Accessibility: Always include aria-hidden="true" on the icon tag if the text next to it already describes the action. This prevents screen readers from announcing the icon separately.
• Versatility: This method works with any FontAwesome icon (e.g., fa-user, fa-envelope, fa-lock) and preserves the button's layout integrity.

Button Icon Alignment

This table illustrates how to use directional icon modifiers (e.g., -icon-right, -icon-left) in combination with the -icon-arrow class to position decorative elements within a text button.

Implementation Notes

• Automatic Icons: The -icon-arrow class typically uses a pseudo-element (::before or ::after) to inject the arrow, meaning you do not need to add a <span> tag manually for the icon.
• Text Padding: The alignment classes (-icon-left, etc.) automatically adjust the button's internal padding to ensure the text and icon do not overlap.
• Combining Styles: These directional modifiers can be combined with any color modifier (e.g., -primary, -secondary) or size modifier (e.g., -small).

Preview	CSS Modifiers	Description
-icon-right -icon-arrow	.-icon-right -icon-arrow	Places the arrow icon to the right of the text. Often used for "Next" or "Expand" actions.
-icon-left -icon-arrow	.-icon-left -icon-arrow	Places the arrow icon to the left of the text. Ideal for "Back" or "Previous" navigation.
-icon-up -icon-arrow	.-icon-up -icon-arrow	Rotates/positions the arrow icon to face upwards. Typically used for collapsing accordions.
-icon-down -icon-arrow	.-icon-down -icon-arrow	Rotates/positions the arrow icon to face downwards. Common for dropdown menus.

Special Button Styles

Show Spinner on Click

See Spinner for more details.

Dropdown & Advanced Buttons

This table covers buttons designed for dropdown menus and complex layouts, including those with absolute-positioned icon stacks and text-overflow handling (ellipsis).

Preview	CSS Modifiers	Description
	.c-btn.-dropdown	Standard dropdown trigger style, often used with a toggle arrow.
	.c-btn.-dropdown.-icon-left	Dropdown button featuring a large lead icon and wrapped text.
	.-dropdown -primary	Advanced layout using .h-overflow-ellipsis

Show Code

Implementation Notes

• Text Wrapping: Use the <span class="c-btn__text"> wrapper to ensure proper alignment and styling of the label, especially when combined with icons.
• Ellipsis & Overflows: For long strings (like email addresses), use the .h-overflow-ellipsis and .h-inline-block utility classes. Note that a max-width should be defined to trigger the truncation.

<div class="h-flex h-space-around h-flex-row gap-m h-vertical-center">
    <button class="c-btn -small -dropdown">
        <span class="c-btn__text">-dropdown</span>
    </button>
    <button class="c-btn -small -dropdown -icon-left">
        <span class="fas fa-user-circle fa-2x" aria-hidden="true"></span>
        <span class="c-btn__text">-dropdown -icon-left</span>
    </button>
    <button class="c-btn -small -secondary-outline -dropdown -icon-left p-l-xs">
      <span class="fa-stack h-pos-absolute h-absolute-vertical-center" aria-hidden="true" style="margin-left: -2.5rem; font-size: 0.875rem">
          <i class="fa-solid fa-circle fa-stack-2x fa-inverse"></i>
          <i class="fa-solid fa-user-tie fa-stack-1x h-color-white h-absolute-vertical-center"></i>
      </span>
        <span class="c-btn__text h-overflow-ellipsis h-inline-block" style="max-width: 260px; line-height: inherit;">
          pharma4u-langertestname-ellipsis@pharma4u.de
      </span>
    </button>
</div>

Dropdown-Filter Button

Specialized button style for filter toggles, often used in combination with a "sliders" icon to indicate filtering options. This button is designed to trigger a dropdown panel containing filter controls. See also: Filter Dropdown

.c-btn.-dropdown.-filter

Show Code

<button
  type="button"
  class="c-btn -secondary -dropdown -filter"
  role="tab"
  aria-controls="...">
  <i class="fas fa-sliders-h" aria-hidden="true"></i>
  Tabelle filtern
</button>

Vue Component: BasicButton

Overview

BasicButton is a typed Vue wrapper around the button SCSS system. It supports variants, sizes, icons, and states while forwarding all native attributes ( aria-*, data-*, etc.) to the underlying <button> element.

How to Use

Quick Start

Import

import { BasicButton } from '@pharma4u/patternlab'

Basic Usage

<BasicButton variant="primary">
  Submit
</BasicButton>

Live Examples

Show Code

<script setup lang="ts">
  import { BasicButton } from '@pharma4u/patternlab'
  
</script>
    <BasicButton variant="primary" size="small" iconClass="fas fa-save" iconPosition="left" @click="handleOnClick">
      Save
    </BasicButton>
    <BasicButton variant="secondary-outline" iconArrow iconPosition="right">
      Next step
    </BasicButton>
    <BasicButton variant="link" disabled>
      Link style (disabled)
    </BasicButton>

Props

Prop	Type	Default	Description
type	'button' | 'submit' | 'reset'	'button'	Native button type
variant	'default' | 'primary' | 'primary-outline' | 'primarylight' | 'secondary' | 'secondary-outline' | 'light' | 'inverted' | 'link'	'default'	Visual style
state	'default' | 'success' | 'warning' | 'error'	'default'	State modifier
size	'default' | 'small' | 'medium' | 'large'	'default'	Size
iconClass	string	''	Icon class (e.g. FontAwesome)
iconPosition	'none' | 'left' | 'right' | 'up' | 'down'	'none'	Icon position
iconButton	boolean	false	Icon-only button
iconArrow	boolean	false	Arrow styling
flat	boolean	false	Flat style
underline	boolean	false	Underline style
dropdown	boolean	false	Dropdown style
filter	boolean	false	Filter style
fullWidth	boolean	false	Full width
block	boolean	false	Block display
disabled	boolean	false	Disabled state
modifiers	string | string[]	—	Extra -modifier classes

Events

Event	Payload	Description
click	MouseEvent	Fired on click (not emitted if disabled)

Slot

• default — Button content

Common Patterns

TBD

Notes

• Forwards all extra attributes (class, data-*, etc.) to <button>
• disabled prevents interaction and click emission
• modifiers are automatically prefixed with -