From a4d2aaf46609830278c49199ae38599a239778f2 Mon Sep 17 00:00:00 2001
From: Nickzlos <n.meyer@mittwald.de>
Date: Tue, 5 Nov 2024 10:19:51 +0100
Subject: [PATCH] docs: Update overview

Integrate description for outline variant + minor content changes
---
 .../03-components/actions/button/overview.mdx | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/docs/src/content/03-components/actions/button/overview.mdx b/packages/docs/src/content/03-components/actions/button/overview.mdx
index e99683bdd..41141944a 100644
--- a/packages/docs/src/content/03-components/actions/button/overview.mdx
+++ b/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,11 +94,11 @@ 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 />
 
@@ -103,9 +106,11 @@ Filterelement wieder entfernt werden kann.
 
 # 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