Mithilfe von Buttons werden verschiedene Handlungsmöglichkeiten des Nutzers dargestellt und klar hierarchisiert. Welche Zielseite durch sie aufgerufen oder welche Aktion ausgelöst wird, kommunizieren Buttons mit einem Label in Audi Type Screen Normal, mit einem Icon oder einer Kombination aus beidem. Buttons geben bei Klick bzw. Tap ein visuelles Feedback in Form eines Response-Effekts sofern die Buttons nicht deaktiviert sind.

Die Buttons stehen in Schwarz und Weiß zur Verfügung.

Die Größe von Buttons ist abhängig von der jeweils verwendeten Basisschriftgröße, die sich wiederum der Viewportbreite anpassen kann.  

  • Kleiner Button bei einer Basisschriftgröße von 16 px, bspw. in einer Smartphone App.
  • Mittelgroßer Button bei einer Basisschriftgröße von 18 px, bspw. in einer Tablet App.
  • Großer Button bei einer Basisschriftgröße von 20 px, bspw. auf einer Website, die in einem breiten Viewport dargestellt wird.

Die Mindestbreite von Primary und Secondary Buttons beträgt ein Neunfaches der verwendeten Basisschriftgröße. Bei einer Basischriftgröße von 16 px sind das demnach 9 × 16 px = 144 px.

 

Primary Button

Der flächige Primary Button wird für die wichtigste Aktion auf einer Seite bzw. View eingesetzt.

HTML
<button class="aui-button aui-button--primary aui-js-response" type="button">Primary Button</button>

Secondary button

Der transparente Secondary Button mit einem feinen Rahmen wird für untergeordnete Aktionen eingesetzt.

HTML
<button class="aui-button aui-button--secondary aui-js-response" type="button">Secondary Button</button>

Text button

Der Text Button wird als subtiler Handlungsaufruf eingesetzt. Standardvariante ist die Kombination aus Text und Pfeil. Die Kombination von Text mit einem Icon oder der Wegfall des Pfeils ist möglich. Wird für einen Text Button eine weitere Hierarchieebene benötigt, kann seine Variante in Audi Type Screen Bold eingesetzt werden.

HTML
<button class="aui-button aui-button--text aui-js-response" type="button"><span class="aui-button__text">Text Button</span></button>

System icon button

System Icon Buttons sind transparent und werden eingesetzt, um klassische Systeminteraktionen (z.B. Speichern, Drucken oder Herunterladen ...) aufzurufen. Sie enthalten ein System Icon und können in den zwei zur Verfügung stehenden Größen eingesetzt werden. Der System Icon Button wird bevorzugt ohne Label verwendet.

HTML
<div>
	<button class="aui-js-response aui-button aui-button--icon aui-button--icon--large audiicon--large aui-button--round">
		<svg class="audiicon audiicon-large">
			<use xlink:href="#aui-icon-system-favorites-large"></use>
		</svg>
	</button>
	<button class="aui-js-response aui-button aui-button--icon aui-button--icon--large audiicon--large aui-button--round">
		<svg class="audiicon audiicon-large">
			<use xlink:href="#aui-icon-system-download-large"></use>
		</svg>
	</button>
	<button class="aui-js-response aui-button aui-button--icon aui-button--icon--large audiicon--large aui-button--round">
		<svg class="audiicon audiicon-large">
			<use xlink:href="#aui-icon-system-help-large"></use>
		</svg>
	</button>
</div>
<div class="icon-sprite">
	<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-favorites-large"><title>system-favorites-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M23.5 15.3l2.3 4.7 5.2.8-3.8 3.7.9 5.2-4.7-2.5-4.7 2.5.9-5.2-3.8-3.7L21 20z"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-favorites-small"><title>system-favorites-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M11.5 5.7l1.7 3.5 3.9.6-2.8 2.7.7 3.8-3.4-1.8-3.4 1.8.7-3.8-3-2.8 3.9-.6z"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-download-large"><title>system-download-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M17 30.5h13M23.5 16v11m4.4-4.4L23.5 27l-4.4-4.4"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-download-small"><title>system-download-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M15 15.5H8M11.5 7v6.4m-3.2-3.2l3.2 3.2 3.2-3.2"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-help-large"><title>system-help-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M22.5 29v2M20 17.4s5.9-2.4 6.7 1.5c.5 2.7-4.2 6.1-4.2 6.1v2"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-help-small"><title>system-help-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M11.5 15v1M9.9 7.5s4.1-1.6 4.6 1c.4 1.9-3 4.2-3 4.2V14"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
	</svg>
</div>
<style media="screen">
body {
	background-color: #f2f2f2;
	padding: 50px;
}
.icon-sprite {
	display: none;
}
</style>

Floating button

Der Floating Button wird für eine beliebige Aktion eingesetzt, wenn sie in einer Ebene über dem Layout hervorgehoben sein soll. Er wird fix im Viewport platziert. Je nach Kontext kann er automatisch oder durch eine Interaktion des Nutzers ein- oder ausgeblendet werden.

HTML
<div>
	<button class="aui-button aui-button--floating audiicon--large aui-js-response">
		<svg class="audiicon audiicon-large">
			<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-list-large"></use>
		</svg>
	</button>
</div>
<div class="icon-sprite">
	<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-list-large"><title>list-large</title><path d="M16 30.5h5m-9 0h2m2-6h12m-16 0h2m2-6h18m-22 0h2" stroke="currentColor" fill="none"></path></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-list-small"><title>list-small</title><path d="M7 15.5h5m-9 0h2m2-4h9m-13 0h2m2-4h14m-18 0h2" stroke="currentColor" fill="none"></path></symbol>
	</svg>
</div>

<style media="screen">
  body {
    background-color: #f2f2f2;
    padding: 50px;
  }
  .icon-sprite {
    display: none;
  }
</style>

Stretched and sticky primary button

Der Stretched and Sticky Primary Button kann bei kleinen Viewports, wie der Primary Button für die wichtigste Funktion einer Seite bzw. View eingesetzt werden. Im Unterschied zum Primary Button wird er fix am unteren Rand eines Viewports platziert.

HTML
<button class="aui-js-response aui-button aui-button--primary aui-button--stretched" type="button">Stretched primary button</button>

Button group

Buttons können gruppiert werden, um mehrere Aktionen nebeneinander anzubieten. Die Anzahl an Buttons sollte für den Nutzer einfach erfassbar sein. Um den Nutzer zu führen, kann eine einzelne, wichtige Aktion als Primary Button hervorgehoben werden. 

 

Primary and secondary button group

Der Primary Button unterstreicht eine wichtigere Handlung gegenüber dem Secondary Button. Pro View wird nur ein Primary Button eingesetzt, der aber mit mehreren Secondary Buttons kombiniert werden kann. Der Abstand zwischen den Buttons ist schmal (empfohlen 0,25 rem, d. h. ein Viertel der Basisschriftgröße).

HTML
<div class="aui-button-group">
  <button class="aui-js-response aui-button aui-button--primary" type="button">Primary button</button>
  <button class="aui-js-response aui-button aui-button--secondary" type="button">Secondary button</button>
</div>

Secondary button group

Secondary Buttons können im Gegensatz zu Primary Buttons auch in unmittelbarer Nähe miteinander kombiniert werden, wenn die angebotenen Handlungsoptionen gleichwertig sind. Der Abstand zwischen den Buttons ist schmal (empfohlen 0,25 rem, d. h. ein Viertel der Basisschriftgröße). 

HTML
<div class="aui-button-group">
  <button class="aui-js-response aui-button aui-button--secondary" type="button">Secondary button</button>
  <button class="aui-js-response aui-button aui-button--secondary" type="button">Secondary button</button>
</div>

Text button group

Text Buttons können ebenfalls in unmittelbarer Nähe kombiniert werden. Sie werden jedoch in einer Button Group nicht mit Primary oder Secondary Buttons in unmittelbarer Nähe gemischt.

HTML
<div class="aui-button-group aui-button-group--texts">
	<button class="aui-js-response aui-button aui-button--text" type="button">
		<span class="aui-button__text">Text button</span>
	</button>
	<button class="aui-js-response aui-button aui-button--text" type="button">
		<span class="aui-button__text">Text button</span>
	</button>
</div>

System icon button group

Gleichwertige Systemaktionen können durch die Kombination von System Icon Buttons abgebildet werden.

HTML
<div>
	<button class="aui-js-response aui-button aui-button--icon aui-button--icon--large audiicon--large aui-button--round">
		<svg class="audiicon audiicon-large">
			<use xlink:href="#aui-icon-system-favorites-large"></use>
		</svg>
	</button>
	<button class="aui-js-response aui-button aui-button--icon aui-button--icon--large audiicon--large aui-button--round">
		<svg class="audiicon audiicon-large">
			<use xlink:href="#aui-icon-system-download-large"></use>
		</svg>
	</button>
	<button class="aui-js-response aui-button aui-button--icon aui-button--icon--large audiicon--large aui-button--round">
		<svg class="audiicon audiicon-large">
			<use xlink:href="#aui-icon-system-help-large"></use>
		</svg>
	</button>
</div>
<div class="icon-sprite">
	<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-favorites-large"><title>system-favorites-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M23.5 15.3l2.3 4.7 5.2.8-3.8 3.7.9 5.2-4.7-2.5-4.7 2.5.9-5.2-3.8-3.7L21 20z"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-favorites-small"><title>system-favorites-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M11.5 5.7l1.7 3.5 3.9.6-2.8 2.7.7 3.8-3.4-1.8-3.4 1.8.7-3.8-3-2.8 3.9-.6z"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-download-large"><title>system-download-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M17 30.5h13M23.5 16v11m4.4-4.4L23.5 27l-4.4-4.4"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-download-small"><title>system-download-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M15 15.5H8M11.5 7v6.4m-3.2-3.2l3.2 3.2 3.2-3.2"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-help-large"><title>system-help-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M22.5 29v2M20 17.4s5.9-2.4 6.7 1.5c.5 2.7-4.2 6.1-4.2 6.1v2"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-help-small"><title>system-help-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M11.5 15v1M9.9 7.5s4.1-1.6 4.6 1c.4 1.9-3 4.2-3 4.2V14"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
	</svg>
</div>
<style media="screen">
body {
	background-color: #f2f2f2;
	padding: 50px;
}
.icon-sprite {
	display: none;
}
</style>
Audi UI Kit Sketch
Version 1.4 (Releases: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB

Dos & Don’ts

Bei kleinen Viewports können Schriftgröße und sowie Innenabstand zum Label links und rechts angepasst werden.
Buttons können sich über die gesamte Viewportbreite erstrecken, z. B. bei nativen Apps.
Gute Button-Labels informieren den Nutzer genau über die Aktion, die er mit einem Button auslösen kann. Sie sind kurz und präzise formuliert.
Text Buttons werden innerhalb einer Button Group nicht mit Primary oder Secondary Buttons gemischt.
Den Nutzer nicht mit zu vielen Buttons auf gleicher Hierarchie überfordern.
In einer View nicht mehr als einen Primary Button einsetzen.
Buttons im disabled State nicht auf Rot platzieren.
Generische Button-Labels geben keine Klarheit über die Aktion, die ein Button auslöst.