diff --git a/src/app/mod.rs b/src/app/mod.rs
index 4bfb8b64..b1773251 100644
--- a/src/app/mod.rs
+++ b/src/app/mod.rs
@@ -31,7 +31,7 @@ pub enum Component {
     DescriptionList,
     Divider,
     Dropdown,
-    #[target(rename = "empty")]
+    #[target(rename = "empty_state")]
     EmptyState,
     ExpandableSection,
     FileUpload,
diff --git a/src/components/empty/mod.rs b/src/components/empty/mod.rs
deleted file mode 100644
index 4d53d385..00000000
--- a/src/components/empty/mod.rs
+++ /dev/null
@@ -1,28 +0,0 @@
-use crate::{example, example::ExamplePage};
-use patternfly_yew::prelude::*;
-use yew::prelude::*;
-
-pub struct EmptyStateExample {}
-
-impl Component for EmptyStateExample {
-    type Message = ();
-    type Properties = ();
-
-    fn create(_: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let example1 = example! ("Empty state" => "empty.1.example");
-        let example2 = example! ("Empty state (XLarge)" => "empty.2.example");
-
-        html! {
-            <>
-                <ExamplePage title="Empty state">
-                    {example1}
-                    {example2}
-                </ExamplePage>
-            </>
-        }
-    }
-}
diff --git a/src/components/empty_state/empty_state.1.example b/src/components/empty_state/empty_state.1.example
new file mode 100644
index 00000000..e4a4990c
--- /dev/null
+++ b/src/components/empty_state/empty_state.1.example
@@ -0,0 +1,27 @@
+html!{
+    <EmptyState>
+        <EmptyStateHeader
+            title_text={html!("Empty state")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Cubes}</>)} />
+            )}
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Primary}>{"Primary action"}</Button>
+            </EmptyStateActions>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Multiple"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action Buttons"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Can"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Go here"}</Button>
+                <Button variant={ButtonVariant::Link}>{"In the secondary"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action area"}</Button>
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}
\ No newline at end of file
diff --git a/src/components/empty_state/empty_state.2.example b/src/components/empty_state/empty_state.2.example
new file mode 100644
index 00000000..b6208b2a
--- /dev/null
+++ b/src/components/empty_state/empty_state.2.example
@@ -0,0 +1,21 @@
+html!{
+    <EmptyState variant={EmptyStateVariant::XS}>
+        <EmptyStateHeader
+            title_text={html!("Empty state")}
+            heading_level={EmptyStateHeadingLevel::H4}            
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Multiple"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action Buttons"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Can"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Go here"}</Button>
+                <Button variant={ButtonVariant::Link}>{"In the secondary"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action area"}</Button>
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}
\ No newline at end of file
diff --git a/src/components/empty_state/empty_state.3.example b/src/components/empty_state/empty_state.3.example
new file mode 100644
index 00000000..5694ceba
--- /dev/null
+++ b/src/components/empty_state/empty_state.3.example
@@ -0,0 +1,27 @@
+html!{
+    <EmptyState variant={EmptyStateVariant::SM}>
+        <EmptyStateHeader
+            title_text={html!("Empty state")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Cubes}</>)} />
+            )}
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Primary}>{"Primary action"}</Button>
+            </EmptyStateActions>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Multiple"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action Buttons"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Can"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Go here"}</Button>
+                <Button variant={ButtonVariant::Link}>{"In the secondary"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action area"}</Button>
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}
\ No newline at end of file
diff --git a/src/components/empty_state/empty_state.4.example b/src/components/empty_state/empty_state.4.example
new file mode 100644
index 00000000..775c41b9
--- /dev/null
+++ b/src/components/empty_state/empty_state.4.example
@@ -0,0 +1,27 @@
+html!{
+    <EmptyState variant={EmptyStateVariant::LG}>
+        <EmptyStateHeader
+            title_text={html!("Empty state")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Cubes}</>)} />
+            )}
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Primary}>{"Primary action"}</Button>
+            </EmptyStateActions>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Multiple"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action Buttons"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Can"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Go here"}</Button>
+                <Button variant={ButtonVariant::Link}>{"In the secondary"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action area"}</Button>
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}
\ No newline at end of file
diff --git a/src/components/empty_state/empty_state.5.example b/src/components/empty_state/empty_state.5.example
new file mode 100644
index 00000000..eca00624
--- /dev/null
+++ b/src/components/empty_state/empty_state.5.example
@@ -0,0 +1,27 @@
+html!{
+    <EmptyState variant={EmptyStateVariant::XL}>
+        <EmptyStateHeader
+            title_text={html!("Empty state")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Cubes}</>)} />
+            )}
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Primary}>{"Primary action"}</Button>
+            </EmptyStateActions>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Multiple"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action Buttons"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Can"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Go here"}</Button>
+                <Button variant={ButtonVariant::Link}>{"In the secondary"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action area"}</Button>
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}
\ No newline at end of file
diff --git a/src/components/empty_state/empty_state.6.example b/src/components/empty_state/empty_state.6.example
new file mode 100644
index 00000000..828b2d2e
--- /dev/null
+++ b/src/components/empty_state/empty_state.6.example
@@ -0,0 +1,11 @@
+html!{
+    <EmptyState>
+        <EmptyStateHeader
+            title_text={html!("Loading")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<Spinner/>)} />
+            )}
+        />
+    </EmptyState>
+}
\ No newline at end of file
diff --git a/src/components/empty_state/empty_state.7.example b/src/components/empty_state/empty_state.7.example
new file mode 100644
index 00000000..b7ce7586
--- /dev/null
+++ b/src/components/empty_state/empty_state.7.example
@@ -0,0 +1,19 @@
+html!{
+    <EmptyState>
+        <EmptyStateHeader
+            title_text={html!("No results found")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Search}</>)} />
+            )}
+        />
+        <EmptyStateBody>
+            {"No results match the filter criteria. Clear all filters and try again."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Clear all filters"}</Button>                
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}
\ No newline at end of file
diff --git a/src/components/empty_state/empty_state.8.example b/src/components/empty_state/empty_state.8.example
new file mode 100644
index 00000000..c2e87eae
--- /dev/null
+++ b/src/components/empty_state/empty_state.8.example
@@ -0,0 +1,14 @@
+html!{
+    <EmptyState>
+        <EmptyStateHeader
+            title_text={html!("Custom icon color")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Check}</>)} color="var(--pf-v5-global--success-color--100)" />
+            )}
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+    </EmptyState>
+}
\ No newline at end of file
diff --git a/src/components/empty_state/mod.rs b/src/components/empty_state/mod.rs
new file mode 100644
index 00000000..e7adb768
--- /dev/null
+++ b/src/components/empty_state/mod.rs
@@ -0,0 +1,46 @@
+use crate::{example, example::ExamplePage};
+use patternfly_yew::prelude::*;
+use yew::prelude::*;
+
+pub struct EmptyStateExample {}
+
+impl Component for EmptyStateExample {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: &Context<Self>) -> Self {
+        Self {}
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let example_a = example! ("Simple Empty State" => "simple_empty_state.1.example");
+        let example_b = example! ("Simple Empty state (XLarge)" => "simple_empty_state.2.example");
+
+        let example1 = example! ("Basic" => "empty_state.1.example");
+        let example2 = example! ("Extra small" => "empty_state.2.example");
+        let example3 = example! ("Small" => "empty_state.3.example");
+        let example4 = example! ("Large" => "empty_state.4.example");
+        let example5 = example! ("Extra large" => "empty_state.5.example");
+        let example6 = example! ("Spinner" => "empty_state.6.example");
+        let example7 = example! ("No match found" => "empty_state.7.example");
+        let example8 = example! ("Custom icon color" => "empty_state.8.example");
+
+        html! {
+            <>
+                <ExamplePage title="Empty state">
+                    {example_a}
+                    {example_b}
+
+                    {example1}
+                    {example2}
+                    {example3}
+                    {example4}
+                    {example5}
+                    {example6}
+                    {example7}
+                    {example8}
+                </ExamplePage>
+            </>
+        }
+    }
+}
diff --git a/src/components/empty/empty.1.example b/src/components/empty_state/simple_empty_state.1.example
similarity index 90%
rename from src/components/empty/empty.1.example
rename to src/components/empty_state/simple_empty_state.1.example
index 2ff5ae4a..359feff5 100644
--- a/src/components/empty/empty.1.example
+++ b/src/components/empty_state/simple_empty_state.1.example
@@ -1,5 +1,5 @@
 html!{
-    <EmptyState
+    <SimpleEmptyState
         title="Empty state"
         icon={Icon::Cubes}
         primary={Action::new("Push me", ctx.link().callback(|_|{}))}
@@ -10,5 +10,5 @@ html!{
         ]}
         >
         {"This section should explain why the state is empty, and what you can do next."}
-    </EmptyState>
+    </SimpleEmptyState>
 }
\ No newline at end of file
diff --git a/src/components/empty/empty.2.example b/src/components/empty_state/simple_empty_state.2.example
similarity index 91%
rename from src/components/empty/empty.2.example
rename to src/components/empty_state/simple_empty_state.2.example
index ba884b1c..e505ac71 100644
--- a/src/components/empty/empty.2.example
+++ b/src/components/empty_state/simple_empty_state.2.example
@@ -1,5 +1,5 @@
 html!{
-    <EmptyState
+    <SimpleEmptyState
         title="Empty state"
         icon={Icon::Cubes}
         size={Size::XLarge}
@@ -11,5 +11,5 @@ html!{
         ]}
         >
         {"This section should explain why the state is empty, and what you can do next."}
-    </EmptyState>
+    </SimpleEmptyState>
 }
\ No newline at end of file
diff --git a/src/components/mod.rs b/src/components/mod.rs
index bfd1bf39..d65ad322 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -14,7 +14,7 @@ mod context_selector;
 mod description_list;
 mod divider;
 mod dropdown;
-mod empty;
+mod empty_state;
 mod expandable_section;
 mod file_upload;
 mod form;
@@ -56,7 +56,7 @@ pub use context_selector::*;
 pub use description_list::*;
 pub use divider::*;
 pub use dropdown::*;
-pub use empty::*;
+pub use empty_state::*;
 pub use expandable_section::*;
 pub use file_upload::*;
 pub use form::*;