diff --git a/components/button/Component.php b/components/button/Component.php
index 5806838..5c8e304 100644
--- a/components/button/Component.php
+++ b/components/button/Component.php
@@ -37,11 +37,21 @@ class Button extends Component
      */
     public bool $disabled;
 
+    /**
+     * If the button is disabled or not.
+     */
+    public ?string $label;
+
     /**
      * The view used to render the component
      */
     public ?string $view;
 
+    /**
+     * The view used to render the component
+     */
+    public ?int $count;
+
     /**
      * Create a new component instance.
      */
@@ -49,14 +59,18 @@ public function __construct(
         ?string $href = null,
         ?string $type = null,
         ?string $icon = null,
+        ?string $label = null,
         string $view = 'button',
         bool $disabled = false,
+        ?int $count = null,
     ) {
         $this->href = $href;
         $this->type = $type;
         $this->icon = $icon;
         $this->view = $view;
         $this->disabled = $disabled;
+        $this->label = $label;
+        $this->count = $count;
 
         if ($this->href) {
             $this->tag = 'a';
diff --git a/components/filter-button/style.scss b/components/filter-button/style.scss
new file mode 100644
index 0000000..8dbf37f
--- /dev/null
+++ b/components/filter-button/style.scss
@@ -0,0 +1,94 @@
+$available-icons: "arrow-right", "more";
+
+.filter {
+    &__container {
+        display: inline-block;
+        position: relative;
+    }
+    &__button {
+        min-height: rem(40);
+        display: flex;
+        gap: rem(8);
+        color: #2c2e30;
+        background-color: #f8f9fa;
+        border: rem(1) solid #ccc;
+        border-radius: rem(6);
+        padding: rem(8) rem(14);
+        cursor: pointer;
+        font-weight: 500;
+        transition: background 0.2s;
+
+        &[data-icon] {
+            .button__label {
+                display: flex;
+                align-items: center;
+                gap: rem(8);
+
+                &:after {
+                    font-size: rem(12);
+                }
+            }
+        }
+
+        @each $icon in $available-icons {
+            &[data-icon="#{$icon}"] .button__label:after {
+                @include icon($icon);
+            }
+        }
+
+        &__count {
+            background: rgba(35, 55, 55, 0.05);
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: rem(24);
+            height: rem(24);
+            font-size: rem(12);
+            font-weight: 500;
+            color: #233737;
+        }
+
+        &:hover {
+            background-color: #e9ecef;
+        }
+
+        &:hover + .filter__menu,
+        &:focus + .filter__menu,
+        &:focus-within + .filter__menu {
+            max-height: rem(500);
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+        }
+    }
+
+    &__menu {
+        max-height: 0;
+        overflow: hidden;
+        transition: 0.2s $ease-out-quad;
+        background: white;
+        border-radius: rem(8);
+        padding: 0 1rem;
+        box-shadow: 0 rem(4) rem(10) rgba(0, 0, 0, 0.1);
+        width: 100%;
+        margin-top: rem(8);
+
+        &:hover,
+        &:focus-within {
+            max-height: rem(500);
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+        }
+    }
+
+    &__apply-button {
+        background-color: #2c2e30;
+        color: white;
+        border: none;
+        border-radius: rem(4);
+        padding: rem(6) rem(10);
+        margin-top: 1rem;
+        width: 100%;
+        cursor: pointer;
+    }
+}
diff --git a/components/filter-button/view.blade.php b/components/filter-button/view.blade.php
new file mode 100644
index 0000000..3121c3f
--- /dev/null
+++ b/components/filter-button/view.blade.php
@@ -0,0 +1,11 @@
+<div class="filter__container">
+    <{{ $tag }} {{ $contextualizedAttributes($attributes)->bem('filter__button') }}>
+        @if ($count)
+            <span class="filter__button__count">{{ $count }}</span>
+        @endif
+        <span class="button__label">{{ $label }}</span>
+    </{{ $tag }}>
+    <div class="filter__menu">
+        {{ $slot }}
+    </div>
+</div>
diff --git a/src/Components/Publishers/Button.php b/src/Components/Publishers/Button.php
index 86b1048..ae6c69e 100644
--- a/src/Components/Publishers/Button.php
+++ b/src/Components/Publishers/Button.php
@@ -41,6 +41,15 @@ public function handle(): FilesCollection
             stub: 'components/icon-button/view.blade.php',
             destination: resource_path('views/components/icon-button.blade.php'),
         );
+        $filterStyle = File::makeFromStub(
+            stub: 'components/filter-button/style.scss',
+            destination: resource_path('sass/parts/_filter-button.scss'),
+        );
+
+        $filterView = File::makeFromStub(
+            stub: 'components/filter-button/view.blade.php',
+            destination: resource_path('views/components/filter-button.blade.php'),
+        );
 
         $component = File::makeFromStub(
             stub: 'components/button/Component.php',
@@ -52,6 +61,8 @@ public function handle(): FilesCollection
             $baseView,
             $iconStyle,
             $iconView,
+            $filterStyle,
+            $filterView,
             $component,
         ]);
     }