Button

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

• Use buttons for actions that occur on the same page (e.g., opening a modal, submitting a form, toggling content).
• Use Links for navigation to a different page or section (can be styled like a button but should use an <a> tag for semantic correctness).
• Use Icon Buttons for actions that can be easily represented by an icon without text or when space is limited.

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.

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
	c-btn
	c-btn -small

WARNING

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

Standard 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 padding.
-		.-disabled	A specific utility class for a generic disabled look.

---

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 Reference

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	Alignment Description
	.-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	Places the arrow icon to the left of the text. Ideal for "Back" or "Previous" navigation.
	.-icon-up -icon-arrow	Rotates/positions the arrow icon to face upwards. Typically used for collapsing accordions.
	.-icon-down -icon-arrow	Rotates/positions the arrow icon to face downwards. Common for dropdown menus.

---

Special Button Styles

Dropdown & Advanced Button Reference

.c-btn.-dropdown

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	Key Features	Description
	.-dropdown	span.c-btn__text	Standard dropdown trigger style, often used with a toggle arrow.
	.-dropdown -icon-left	.fas.fa-2x	Dropdown button featuring a large lead icon and wrapped text.
	.-dropdown -primary	.h-overflow-ellipsis	Advanced layout using ellipsis

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.

---

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 -primarylight -dropdown -filter"
  role="tab"
  aria-controls="...">
  <i class="fas fa-sliders-h" aria-hidden="true"></i>
  Tabelle filtern
</button>