Button

Buttons sind das Standard-Element für Aktionen wie "Senden" et cetera.
Die Standard-Farbe für Buttons auf weißem oder nebelgrauem Hintergrund ist Interaktiv-Blau.
Die Standard-Farbe für Call to Action-Buttons (Mitbestimmen, Newsletter abonnieren et cetera) ist Frischgrün.
Auf farbigem Hintergrund (nur in der Light-Variante erlaubt) sind nur Buttons in derselben Farbe (100 Prozent Deckkraft) möglich.
In Ausnahmefällen, zum Beispiel bei Sonderauftritten, dürfen Buttons alle Farben haben, außer "Wien Rot" und "Fast Schwarz".
In Applikationen und Formularen sind nur Standard-Buttons (primär, sekundär, tertiär) erlaubt, keine farbigen Buttons. Als Hintergrundfarben sind nur Weiß und Nebelgrau Light möglich.
Buttons sollten nur ein Wort enthalten. Beispiel: "Akzeptieren" und nicht "Hier klicken, um zu akzeptieren".
Buttons bekommen kein Icon "externer Link".

Varianten

Buttons primär

Button primär

Ist der primäre Button für Aktionen wie "Senden", "Weiter" et cetera

Vorschau

Code

<wm-button>
  <button>Senden</button>
</wm-button>

Button primär inaktiv

Vorschau

Code

<wm-button>
  <button aria-disabled="true" disabled>Senden</button>
</wm-button>

Button primär mit Icon

Das Icon muss immer vor dem Text sein.

Vorschau

Code

<wm-button>
  <button>
    <wm-icon iconid="download"></wm-icon>
    Download</button>
</wm-button>

Button primär rund

Darf nur alleinstehend und nicht kombiniert mit anderen Buttons eingesetzt werden.

Vorschau

Code

<wm-button round>
  <button>
    <wm-icon iconid="info" width="38">Information</wm-icon>
  </button>
</wm-button>

Button Zum Seitenanfang springen

Um diesen Button zu verwenden, müssen das href-Attribute (zeigt auf das Ankerziel) und id-Attribut (liegt auf dem Ankerziel) übereinstimmen und der Button im Footer eingebunden werden.

Vorschau

Zum Seitenanfang

Code

<wm-button kind="secondary" round id="wm-button-to-top">
  <a class="wm-e-button" href="#IdGleichElementSprungmarke" ><wm-icon iconid="chevron-up" width="28">Zum Seitenanfang</wm-icon></a>
</wm-button>

Button Call-to-Action

Darf nur für Call-to-Actions wie "Mitmachen", "Abstimmen", "Jetzt registrieren", "Bestellen", "Abonnieren" et cetera eingesetzt werden.

Vorschau

Code

<wm-button color="frischgruen">
  <button>Mitmachen</button>
</wm-button>

Buttons sekundär

Button sekundär

Vorschau

Code

<wm-button kind="secondary">
  <button>Abbrechen</button>
</wm-button>

Button sekundär inaktiv

Vorschau

Code

<wm-button kind="secondary">
  <button aria-disabled="true" disabled>Abbrechen</button>
</wm-button>

Button sekundär mit Icon

Das Icon muss immer vor dem Text sein.

Vorschau

Code

<wm-button kind="secondary">
  <button>
    <wm-icon iconid="download"></wm-icon>Download</button>
</wm-button>

Button mit Dropdown

Vorschau

Code

<wm-button kind="secondary"  menu="block-end">
  <button>
    Weitere…
    <wm-icon iconid="chevron-down"></wm-icon>
  </button>
  <ul>
    <li>
      <button>Daten am Computer speichern</button>
    </li>
    <li>
      <button>Gespeicherte Daten laden</button>
    </li>
  </ul>
</wm-button>

Button sekundär rund

Darf nur alleinstehend und nicht kombiniert mit anderen Buttons eingesetzt werden.

Vorschau

Code

<wm-button round kind="secondary">
  <button>
    <wm-icon iconid="info" width="38">Information</wm-icon>
  </button>
</wm-button>

Button sekundär klein

Nur für Mikro-Interaktionen wie zum Beispiel "Löschen" oder "Entfernen" innerhalb anderer Patterns.

Vorschau

Code

<wm-button size="s" kind="secondary">
  <button>Senden</button>
</wm-button>

Button sekundär ur klein

Vorschau

Ausgewählte Filter

Träger:

Code

<wm-highlight color="nebelgrau-light">
  <wm-details open>
    <span slot="label" style="font-size:var(--wm-font-size-m)">Ausgewählte Filter</span>
    <div slot="content" style="margin-top:var(--wm-spacing-s)">
      <wm-filter-selection
        role="group"
        aria-labelledby="selected_filter_heading"
        categorize=""
        filterid="filterDistricts, filter_1, filter_2">
        <ul>
          <li>
            <span class="label" id="parentlabel-0">Träger:</span>
            <div>
              <wm-button kind="secondary" size="xs">
                <button type="button">
                  Privat
                  <span class="wm-h-vh">entfernen</span>
                  <wm-icon iconid="close" width="16" height="16"></wm-icon>
                </button>
              </wm-button>
              <wm-button kind="secondary" size="xs">
                <button type="button">
                  Städtisch
                  <span class="wm-h-vh">entfernen</span>
                  <wm-icon iconid="close" width="16" height="16"></wm-icon>
                </button>
              </wm-button>
            </div>
          </li>
        </ul>
      </wm-filter-selection>
    </div>
  </wm-details>
</wm-highlight>

Buttons tertiär

Dürfen nur auf weißem und nebelgrauem Hintergrund eingesetzt werden.

Button tertiär

Vorschau

Code

<wm-button kind="tertiary">
  <button>Senden</button>
</wm-button>

Button tertiär inaktiv

Vorschau

Code

<wm-button kind="tertiary">
  <button aria-disabled="true" disabled>Senden</button>
</wm-button>

Button tertiär mit Icon

Vorschau

Code

<wm-button kind="tertiary">
  <button>
    <wm-icon iconid="pen"></wm-icon>Bearbeiten</button>
</wm-button>

Button-Gruppen

Button-Gruppen sind in mehreren Kombinationen möglich: primär, sekundär, nebeneinander, untereinander, in voller Breite und allen Button-Farben.

Button-Gruppe

Vorschau

Zurück

Weiter

Code

<wm-stack horizontal gap="xs">
  <wm-button kind="secondary" menuicon="chevron-up" menu="block-end">
    <button>
      Weitere…
      <wm-icon iconid="chevron-down" width="23.5"></wm-icon>
    </button>
    <ul>
      <li>
        <button>Daten am Computer speichern</button>
      </li>
      <li>
        <button>Gespeicherte Daten laden</button>
      </li>
    </ul>
  </wm-button>
  <wm-button kind="secondary">
    <a href="#" class="wm-e-button">Zurück</a>
  </wm-button>
  <wm-button>
    <a href="#" class="wm-e-button">Weiter</a>
  </wm-button>
</wm-stack>

Button-Gruppe volle Breite

Vorschau

Code

<wm-stack vertical gap="xs">
  <wm-button full>
    <button>Speichern</button>
  </wm-button>
  <wm-button full kind="secondary">
    <button>Abbrechen</button>
  </wm-button>
</wm-stack>

Button-Gruppe Abendstimmung

Vorschau

Speichern

Abbrechen

Code

<wm-highlight color="abendstimmung-light">
  <wm-button color="abendstimmung">
    <a href="#" class="wm-e-button">Speichern</a>
  </wm-button>
  <wm-button color="abendstimmung" kind="secondary">
    <a href="#" class="wm-e-button">Abbrechen</a>
  </wm-button>
  
</wm-highlight>

Button-Gruppe Frischgrün

Vorschau

Speichern

Abbrechen

Code

<wm-highlight color="frischgruen-light">
  <wm-button color="frischgruen">
    <a href="#" class="wm-e-button">Speichern</a>
  </wm-button>
  <wm-button color="frischgruen" kind="secondary">
    <a href="#" class="wm-e-button">Abbrechen</a>
  </wm-button>
  
</wm-highlight>

Button-Gruppe Goldgelb

Vorschau

Speichern

Abbrechen

Code

<wm-highlight color="goldgelb-light">
  <wm-button color="goldgelb">
    <a href="#" class="wm-e-button">Speichern</a>
  </wm-button>
  <wm-button color="goldgelb" kind="secondary">
    <a href="#" class="wm-e-button">Abbrechen</a>
  </wm-button>
  
</wm-highlight>

Dev

Interaktive Demo

kind

full

justify

color

size

width

Vorschau

Code

<wm-button data-demo-pattern="wm-button-preview">
  <button>Senden</button>
</wm-button>

Weitere Farben

Wichtige Informationen zur Verwendung weiterer Farben finden Sie im Bereich Development - Individuelle Anpassungen.

Die in der Demo aufgelisteten Farben sind nur im Wiener-Melange-Theme verfügbar. Um Ihre eigenen Farben im White-Label-Theme zu definieren, fügen Sie einfach CSS-Regeln nach dem folgenden Muster hinzu:

wm-button[color="meinefarben"] { 
  --button-background-color: #174342;
  --button-background-color--hover: rgb(87, 180, 179);
  --button-border-color: yellow;
  --button-border-color--hover:	orange;
  --button-font-color: white;
  --button-font-color--hover: #000;
}

<wm-button color="meinefarben">
  <button>Senden</button>
</wm-button>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Icon/Icon.js" type="module"></script>

JavaScript

import { Button } from './wienermelange/assets/js/components/Button/Button.js';
    import { Icon } from './wienermelange/assets/js/components/Icon/Icon.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`kind`	Art des Buttons	`'clean'\|'primary'\|'secondary'\|'tag'\|'tertiary'`	leer
`full`	Button über die volle Breite darstellen. Immer oder bis 512px (s) oder 768px (m)	`'s'\|'m'\|'always'`	leer
`justify`	Inhalt im Button ausrichten	`'center'\|'space-between'`	leer
`color`	Hintergrundfarbe des Buttons	`'abendstimmung'\|'flieder'\|'frischgruen'\|'goldgelb'\|'morgenrot'\|'nebelgrau'\|'wasserblau'`	leer
`size`	Größe (üblicherweise Schriftgröße und Innenabstand) des Buttons	`'xs'\|'s'\|'m'\|'l'`	leer
`menu`	Positionierung des Menüs. block-* und inline-* können kombiniert werden. Wenn das Attribut ohne Wert definiert oder nur eine Liste vorhanden ist, wird defaultmäßig block-start und inline-start genommen.	`'block-start'\|'block-end'\|'inline-start'\|'inline-end'`	leer
`open`	Dropdown, wenn vorhanden, geöffnet oder nicht	`Boolean`	`false`
`round`	Button rund darstellen	`Boolean`	`false`
`width`	Mindestbreite des Buttons	`'s'`	leer
`copy`	Selektor für das Element, dessen Inhalt kopiert werden soll	`string`	leer

Slots

Name	Beschreibung
`default`	Link oder Button

CSS API

Property	Beschreibung
`--button-background-color`	Hintergrundfarbe
`--button-background-color--hover`	Hintergrundfarbe Hover & Focus
`--button-border-color`	Rahmenfarbe
`--button-border-color--hover`	Rahmenfarbe Hover & Focus
`--button-font-color`	Schriftfarbe
`--button-font-color--hover`	Schriftfarbe Hover & Focus
`--button-gap`	Gap innerhalb
`--button-text-transform`	Groß-/Kleinschreibung
`--button-option-background-color`	Hintergrundfarbe von Optionen in Auto-Suggest
`--button-menu-background-color`	Hintergrundfarbe von Optionen
`--button-menu-inline-offset`	Abstand horizontal zwischen Button und Menü
`--button-menu-block-offset`	Abstand vertikal zwischen Button und Menü
`--button-menu-shadow`	Schatten von Optionen
`--button-padding-block`	Vertikaler Innenabstand
`--button-padding-inline`	Horizontaler Innenabstand
`--button-min-height`	Minimale Höhe
`--button-min-width`	Minimale Breite
`--button-active`	undefined

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at