4 files changed, 66 insertions, 2 deletions
diff --git a/app/components/pajamas/banner_component.html.haml b/app/components/pajamas/banner_component.html.haml
index 4fa2ed09cd3..c2eeae2d8c9 100644
--- a/app/components/pajamas/banner_component.html.haml
+++ b/app/components/pajamas/banner_component.html.haml
@@ -14,7 +14,7 @@
     - if primary_action?
       = primary_action
     - else
-      = link_to @button_text, @button_link, { **@button_options, class: 'btn btn-md btn-confirm gl-button js-close-callout' }
+      = link_button_to @button_text, @button_link, **@button_options, class: 'js-close-callout', variant: :confirm
 
     - actions.each do |action|
       = action
diff --git a/app/components/pajamas/banner_component.rb b/app/components/pajamas/banner_component.rb
index 6082762f22c..1a03f3fdd58 100644
--- a/app/components/pajamas/banner_component.rb
+++ b/app/components/pajamas/banner_component.rb
@@ -49,7 +49,7 @@ module Pajamas
       end
     end
 
-    delegate :sprite_icon, to: :helpers
+    delegate :sprite_icon, :link_button_to, to: :helpers
 
     renders_one :title
     renders_one :illustration
diff --git a/app/components/pajamas/empty_state_component.html.haml b/app/components/pajamas/empty_state_component.html.haml
new file mode 100644
index 00000000000..ecd3498c5cd
--- /dev/null
+++ b/app/components/pajamas/empty_state_component.html.haml
@@ -0,0 +1,29 @@
+- empty_state_class = @compact ? 'gl-flex-direction-row gl-align-items-center' : 'gl-text-center gl-flex-direction-column'
+
+%section.gl-display-flex.empty-state{ **@empty_state_options, class: empty_state_class }
+  - if @svg_path.present?
+    - image_class = @compact ? 'gl-display-none gl-sm-display-block gl-px-4' : 'gl-max-w-full'
+    %div{ class: image_class }
+      = image_tag @svg_path, alt: "", class: 'gl-dark-invert-keep-hue'
+
+  - content_wrapper_class = @compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto pl-p-5'
+  %div{ class: content_wrapper_class }
+    - title_class = @compact ? 'gl-mt-0' : 'gl-my-3'
+    %h1.gl-font-size-h-display.gl-line-height-36{ class: title_class }
+      = @title
+
+    - if description?
+      %p.gl-mt-3{ 'data-testid': 'empty-state-description' }
+        = description
+
+    - if @primary_button_text.present? || @secondary_button_text.present?
+      - button_wrapper_class = @compact.present? ? '' : 'gl-justify-content-center'
+      .gl-display-flex.gl-flex-wrap{ class: button_wrapper_class }
+
+        - if @primary_button_text.present?
+          = render Pajamas::ButtonComponent.new(variant: :confirm, href: @primary_button_link, button_options: { class: 'gl-ml-0!' }) do
+            = @primary_button_text
+
+        - if @secondary_button_text.present?
+          = render Pajamas::ButtonComponent.new(variant: :default, href: @secondary_button_link, button_options: { class: ('gl-ml-0!' unless @primary_button_text.present?) }) do
+            = @secondary_button_text
diff --git a/app/components/pajamas/empty_state_component.rb b/app/components/pajamas/empty_state_component.rb
new file mode 100644
index 00000000000..d0c0da12d3b
--- /dev/null
+++ b/app/components/pajamas/empty_state_component.rb
@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Pajamas
+  class EmptyStateComponent < Pajamas::Component
+    # @param [Boolean] compact
+    # @param [String] title
+    # @param [String] svg_path
+    # @param [String] primary_button_text
+    # @param [String] primary_button_link
+    # @param [String] secondary_button_text
+    # @param [String] secondary_button_link
+    # @param [Hash] empty_state_options
+    def initialize(
+      compact: false,
+      title: nil,
+      svg_path: nil,
+      primary_button_text: nil,
+      primary_button_link: nil,
+      secondary_button_text: nil,
+      secondary_button_link: nil,
+      empty_state_options: {}
+    )
+      @compact = compact
+      @title = title
+      @svg_path = svg_path.to_s
+      @primary_button_text = primary_button_text
+      @primary_button_link = primary_button_link
+      @secondary_button_text = secondary_button_text
+      @secondary_button_link = secondary_button_link
+      @empty_state_options = empty_state_options
+    end
+
+    renders_one :description
+  end
+end