Adopting Core Components

We have added new React components to the Audi CI to ensure a uniform appearance on the web. All existing React components can be found in the Audi React Library. Audi will continue to develop and add to this library.

Buttons can be used to show the user’s choice of options for actions and assign these to a clear hierarchy. The target page to be accessed or the action to be triggered is shown on the buttons by means of a label in Audi Type Wide Normal or else by an icon, or by a combination of the two. Good button labels are formulated in a way that is brief and precise. They tell the user exactly what action will be taken when the button is clicked. Buttons provide visual feedback when clicked or tapped, in the form of a response effect, providing that the buttons are not deactivated.

The size of buttons depends on the base font size used which can be adapted to the viewport width.

  • Small button at a base font size of 16 px, e.g. in a smartphone app.
  • Medium sized button at a base font size of 18 px, e.g. in a tablet app.
  • Large button at a base font size of 20 px, e.g. on a website which is rendered in a wide viewport.

The minimum width of primary and secondary buttons is defined as nine times the base font size. Thus, with a base font size of 16 px, the minimum button width is 9 × 16 px = 144 px.

For small viewports, the font size and padding for the label can be adjusted on the left and right.

Primary Buttons

The filled-out primary button is used for the most important action on a page or in a view. Primary buttons are available in black and white.

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

Secondary Button

The transparent secondary button with a thin frame is used for subordinate actions. Secondary buttons are available with a white or black border.

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

Text Button

The text button is applied as a subtle call to action. The standard variant is a combination of text and arrow. It is possible to combine a text button with an icon, but then without an arrow. For selected purposes, the arrow can be omitted from the standard variant.

The text is typeset in Audi Type Wide.

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 are used to trigger classic system interactions (e.g. save, print or download ...)   They contain a system icon and can be used in the two sizes available. The system icon button is transparent and should preferably be used without a label.

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>
</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>
	</svg>
</div>
<style media="screen">
body {
	background-color: #f2f2f2;
	padding: 50px;
}
.icon-sprite {
	display: none;
}
</style>

Floating Button

The floating button is used for any action if it is to be highlighted in a level above the layout. It has a fixed position in the viewport. Depending on the context it can be hidden or shown, either automatically or through user interaction.

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

For small viewports with a maximum width of 767 px (Breakpoint S), the stretched and sticky primary button can be used like the primary button for the most important function of a page or view. In contrast to the primary button, the stretched and sticky primary button is permanently placed at the lower edge of a viewport and runs across the entire width of the viewport. This option is used with native mobile apps, for example.

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

Button Group

Buttons can be grouped so as to offer several actions alongside each other. The number of buttons should be easy for the user to grasp. A single, important action can be emphasised as the primary button in order to guide the user. 

 

Primary and secondary button group

The primary button emphasises a more important action as compared to the secondary button. Only one primary button is used per view, but this can be combined with several secondary buttons. The gap between the buttons is small (recommendation: 0.25 rem, i.e. one quarter of the basic type size). 

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

Unlike primary buttons, secondary buttons can be combined directly adjacent to one another if the options for action offered are equivalent. The gap between the buttons is small (recommendation: 0.25 rem, i.e. one quarter of the basic type size). 

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 can likewise be grouped directly adjacently to one another. However, they are not mixed in a button group with primary or secondary buttons that are immediately adjacent.

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

Equivalent system actions can be indicated by the combination of system icon buttons.

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 – Integration into Sketch library

To ensure designers are using the most up-to-date components and icons in their products, the Audi UI Kit was created as a sketch library. Integrate these UI Kits to get the latest Audi Sketch Libraries. Updates will be made regularly and users will be informed when new versions of the Librarys are available.

 

Audi UI Kit for Figma

To enable as many designers as possible to work with the Audi user interface components the UI Kit and icons is also offered for Figma. Updates are made regularly and all changes are documented for users in the changelog.

Audi Figma UI-Kit and Icons
Figma Files for UI-Komponents, Icon Library and a Readme-file to get started and how to proceed with updating the files.
ZIP
21.2 MB

Don’ts

Text buttons are not mixed with primary or secondary buttons within a button group.
The user should not be overwhelmed with too many buttons on the same hierarchy.
Do not use more than one primary button in a view.
Do not place buttons in a disabled state on red.
Generic button labels do not provide any clarity about the action that a button triggers.