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 Screen Normal or else by an icon, or by a combination of the two. All buttons provide visual feedback when clicked or tapped in the form of a response effect.

Buttons are either black or white. Buttons can be grouped.

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.

 

Primary Buttons

The filled-out primary button is used for the most important action on a page or in a view.

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.

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 or else omit an icon. If an additional hierarchy level is required for a text button, its variant can be applied in Audi Type Screen Bold.

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 class="aui-button-group aui-button-group--icons">
  <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="#audiicon-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="#audiicon-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="#audiicon-system-help-large"></use>
    </svg>
  </button>
</div>

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
<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="#audiicon-list-large"></use>
  </svg>
</button>

Stretched and Sticky Primary Button

Like the primary button, the stretched and sticky primary button can be used for the most important function of a page or view. Unlike the primary button, it is placed in a fixed position and bled to the edge at the bottom edge of a viewport. It is used for small viewports.

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">
    Text button
  </button>
  <button class="aui-js-response aui-button aui-button--text" type="button">
    Text button
  </button>
</div>

System icon button group

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

HTML
<div class="aui-button-group aui-button-group--icons">
  <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="#audiicon-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="#audiicon-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="#audiicon-system-help-large"></use>
    </svg>
  </button>
</div>
Audi UI Kit Sketch
Version 1.4 (Releases: <a href="https://github.com/audi/audi-templates/releases" target="_blank">https://github.com/audi/audi-templates/releases</a>)
ZIP
76.3 MB

Dos & Don’ts

With small viewports, the type size and the inner spacing from the label on the left and right can be adapted.
Buttons can run across the entire viewport width, e.g. in the case of native apps.
Good button labels tell the user exactly what the action is that it triggers. They are formulated succinctly and precisely.
Text buttons within a button group are not to be mixed with primary or secondary buttons.
Don’t expect too much of the user by offering too many buttons at the same hierarchy level.
Don't apply more than one primary button in a single view.
Dont´t place buttons against a red background in their disabled state.
Generic button labels provide clarity as to the action triggered by the button.
Your CI-Support
May we help you?