Schaltflächen, Links und SteuerelementeButtons, links, and controls


SchaltflächentypenButton types

Die Art und Weise, wie Schaltflächen formatiert werden, hilft bei der Kommunikation, welche Art von Aktion ausgelöst wird.The way buttons are styled helps communicate what kind of action they trigger. Wir halten eine Vielzahl von Schaltflächen, die formatiert sind, um unterschiedliche Schwerpunkte anzuzeigen.We maintain a wide range of buttons that are formatted to show different levels of emphasis.

Schaltflächen können Text, ein Symbol oder eine Kombination aus Text und Symbol aufweisen.Buttons can have text, an icon, or a combination of text and an icon. Um verschiedene Ebenen in einer Hierarchie zu kommunizieren, haben wir die primären und sekundären Schaltflächen innerhalb der einzelnen Kategorien entworfen.To communicate different levels in a hierarchy, we designed primary and secondary buttons within each category.

Fluent-Entwurfs SystemFluent Design System

Die Fluent-Benutzeroberfläche bietet Anleitungen für Webseiten-und Desktop-Komponenten Zustände, Styling und Barrierefreiheit.Fluent UI provides guidance for web and desktop component states, styling, and accessibility. Schaltflächen auf der Microsoft Teams-Plattform können formatiert werden, um unterschiedliche Gewichtungs Ebenen anzuzeigen.Buttons on the Teams platform can be formatted to show different levels of emphasis. Siehe Fluent UI Buttons Colors for HTML and CSS hexadezimal Color values.See Fluent UI button colors for HTML and CSS hexadecimal color values.

Text SchaltflächenText buttons

In Dialogfeldern sollten Sie die Schaltflächen rechtsbündig ausrichten, beginnend mit der primären Aktion am weitesten rechts.In dialogs, you should align buttons to the right, starting with the primary action farthest to the right. In Karten werden Schaltflächenlinks bündig ausgerichtet.In cards, buttons are left-aligned.

Schaltflächenformat Vorlagen in Microsoft TeamsButton styles in Teams

Desktop Client

Desktop Client

Mobiler Client

Mobile Client

Dialog Felder

Dialog buttons

Status der kartenschaltfläche

Card button states

Kartenschaltflächen

Card buttons

SymbolschaltflächenIcon buttons

Symbolschaltflächen können eine Aktion aufrufen und können auch aktiviert und deaktiviert werden.Icon buttons can invoke an action and can also be toggled on and off.

In einigen Fällen können Sie ein Symbol und einen Text koppeln, um die Betonung zu verbessern.In some cases, you can pair an icon and text to increase emphasis.

Verschiedene SchaltflächenMiscellaneous buttons

Desktop ClientsDesktop Clients

Radiale Schaltflächen, Kontrollkästchen und Toggle-Schalter.Radial buttons, checkboxes, and toggle switches.

Mobile ClientsMobile Clients

Radiale Schaltflächen, Kontrollkästchen und Toggle-Schalter.Radial buttons, checkboxes, and toggle switches.


Hier sind unsere genehmigten Formatvorlagen für Inlinetext Links.Here are our approved styles for inline text links.


FormatStyle

Größe und AbstandSize and padding

Text Schaltflächen, Symbole und Steuerelemente sind in einem Bund-hohen Container enthalten, um sicherzustellen, dass alle Steuerelemente visuell ausgerichtet und konsistent sind.Text buttons, icons, and controls are contained within a 32px high container to ensure all controls are visually aligned and consistent.

Abgerundete EckenRounded corners

Text Schaltflächen haben einen Eckenradius von 3px.Text buttons have a corner radius of 3px.

SchaltflächentextButton text

Verwenden Sie im Text für die Schaltfläche "Satz Groß-/Kleinschreibung" Unterstützung bei Lokalisierung und Lesbarkeit.Use sentence case in text for buttons to help with localization and legibility. (Mit anderen Worten: Großbuchstaben für den ersten Buchstaben des ersten Wortes in einem Ausdruck oder Satz.)(In other words, only capitalize the first letter of the first word in a phrase or sentence.)