> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/handbuch/header/aktions-buttons/konfiguration.md).

# Konfiguration

## Basiskonfiguration

***

### Text anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-Max-Width (Full-width-boxed)

**Beispiel Wert**:\
`Tablet (Hochformat) (≥768px)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-text-show`

***

### Position (Icon)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• links\
• oberhalb

**Beispiel Wert**:\
`links`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-icon-position`

***

### Ecken

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht abgerundet\
• abgerundete Ecken\
• runde Ecken

**Beispiel Wert**:\
`abgerundete Ecken`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-corner-type`

{% hint style="info" %}
**abgerundete Ecken**\
Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

**runde Ecken**\
Verwendet einen vordefinierten Radius für runde Ecken.
{% endhint %}

## Typografie

***

### Schriftgröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`14`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-header-actions-btn-font-size`

***

### Strichstärke

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• light\
• normal\
• bold

**Beispiel Wert**:\
`normal`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-header-actions-btn-font-weight`

***

### Zeilenhöhe

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`35`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-header-actions-btn-line-height`

{% hint style="info" %}
Diese "Zeilenhöhe" wird bei der Header-Darstellungsart "Header 2.1" ignoriert und stattdessen die Zeilenhöhe der "Top-Bar" verwendet.
{% endhint %}

***

### Icongröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`14`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-header-actions-btn-icon-font-size`

## Farbkonfiguration

***

### Textfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-color`

***

### Textfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-color-hover`

***

### Iconfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-icon-color`

***

### Iconfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-icon-color-hover`

***

### Rahmenfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e4e7ea`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-border-color`

***

### Rahmenfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e6e6e6`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-border-color-hover`

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-background-color`

***

### Hintergrundfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#f6f6f6`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-actions-btn-background-color-hover`

## Merkzettel-Button

***

### Hintergrundfarbe (Badge)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Merkzettel-Button"

**Technischer Name**:\
`twt-header-actions-wishlist-btn-badge-background-color`

## "Mein Konto"-Button

***

### "Angemeldet"-Badge anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen

**Beispiel Wert**:\
`nicht anzeigen`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt ""Mein Konto"-Button"

**Technischer Name**:\
`twt-header-actions-account-menu-btn-badge-show`

{% hint style="info" %}
Zeigt die ThemeWare® "Angemeldet-Badge" an wenn der Kunde eingeloggt ist.
{% endhint %}

***

### Hintergrundfarbe (Badge)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt ""Mein Konto"-Button"

**Technischer Name**:\
`twt-header-actions-account-menu-btn-badge-background-color`

## Warenkorb-Button

***

### Preis anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-Max-Width (Full-width-boxed)

**Beispiel Wert**:\
`Tablet (Querformat) (≥992px)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-total-show`

***

### Badge anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-Max-Width (Full-width-boxed)

**Beispiel Wert**:\
`Phone (Hochformat) (<576px)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-badge-show`

***

### Text anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-Max-Width (Full-width-boxed)

**Beispiel Wert**:\
`Tablet (Hochformat) (≥768px)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-text-show`

***

### Separator anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen

**Beispiel Wert**:\
`nicht anzeigen`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-separator-show`

***

### Strichstärke

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• light\
• normal\
• bold

**Beispiel Wert**:\
`normal`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-font-weight`

***

### Textfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-color`

***

### Textfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-color-hover`

***

### Iconfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-icon-color`

***

### Iconfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-icon-color-hover`

***

### Rahmenfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e4e7ea`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-border-color`

***

### Rahmenfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e6e6e6`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-border-color-hover`

***

### Rahmenfarbe (Separator)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e4e7ea`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-separator-border-color`

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eef2f5`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-background-color`

***

### Hintergrundfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-background-color-hover`

***

### Hintergrundfarbe (Badge)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

**Technischer Name**:\
`twt-header-actions-cart-btn-badge-background-color`