Merge pull request #941 from mittwald/Nickzlos-patch-1

packages/docs/src/content/03-components/actions/button/overview.mdx

@@ -11,18 +11,21 @@ zu ermöglichen.
 
 # Variants
 
-Beim Button wird zwischen den Variants **Solid, Soft, Plain** und **Outline**
+Beim Button wird zwischen den Variants **Solid, Soft, Outline** und **Plain**
 unterschieden.
 
 <LiveCodeEditor example="variants" editorCollapsed />
 
-**Solid:** Die Solid-Variant zeichnet sich durch sein flächiges und auffälliges
+**Solid:** Die Solid-Variant zeichnet sich durch ein flächiges und auffälliges
 Aussehen aus. Aus diesem Grund verbergen sich in der Regel die Hauptaktionen
 hinter einem Solid-Button.
 
 **Soft:** Die Soft-Variant verleiht dem Button einen softeren Touch und eignet
 sich daher gut für sekundäre Aktionen.
 
+**Outline:** Die Outline-Variant wirkt durch den Verzicht auf eine Hintergrundfarbe 
+dezent. Durch den Rahmen bleibt sie weiterhin präsent, ohne dominant zu erscheinen.
+
 **Plain:** Die Plain-Variant ist weniger auffällig als die anderen Variants und
 wird für weniger wichtige oder versteckte Aktionen verwendet.
 
@@ -54,7 +57,7 @@ verbergen.
 
 Zusätzlich zu den Standard-Colors, können Button in **Light** und **Dark**
 dargestellt werden. Beide Colors sind Alternativen zu den herkömmlichen Farben,
-falls diese nicht auf farbigen/dekorativen Hintergründen funktionieren.
+falls diese nicht auf farbigen oder dekorativen Hintergründen funktionieren.
 
 <LiveCodeEditor example="light" bgColor="dark" editorCollapsed />
 
@@ -91,21 +94,23 @@ anzuzeigen.
 
 ## Text und Icon
 
-Verwende `<Text />` zusammen mit `<Icon />` in einem `<Button />`, um Text mit
-einem Icon im Button anzuzeigen. Das Icon soll spezielle Verhaltensweisen des
-Buttons signalisieren. Zum Beispiel kann ein Chevron-Icon dem Nutzer anzeigen,
-dass sich ein Dropdown öffnet, oder ein Close-Icon zeigt an, dass der Button als
-Filterelement wieder entfernt werden kann.
+Verwende `<Text />` und `<Icon />` zusammen, um sowohl Text als auch Icon im 
+Button anzuzeigen. Achte darauf, dass das Icon dem User einen Mehrwert bietet 
+und nicht nur einen dekorativen Zweck erfüllt. Zum Beispiel indiziert ein 
+Chevron-Icon, dass der Button ein Dropdown öffnet. Ein Close-Icon zeigt an, 
+dass der Button als Filterelement wieder entfernt werden kann.
 
 <LiveCodeEditor example="iconText" editorCollapsed />
 
 ---
 
 # States
 
+Ein Button hat sieben verschiedene States: **Default, Hover, Pressed, Disabled, Pending, Succeeded** und Failed.
+
 <LiveCodeEditor example="states" editorCollapsed />
 
-**Disabled:** Verwende den Disabled State, wenn der Button keine Aktion oder
+**Disabled:** Verwende den Disabled-State, wenn der Button keine Aktion oder
 kein Ereignis auslösen soll.
 
 **Pending, Succeeded und Failed:** Pending, Succeeded und Failed sollen dem