diff --git a/pages/attribute-editor/condensed.page.tsx b/pages/attribute-editor/condensed.page.tsx
new file mode 100644
index 0000000000..ee6da36be4
--- /dev/null
+++ b/pages/attribute-editor/condensed.page.tsx
@@ -0,0 +1,217 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import AppLayoutToolbar from '~components/app-layout-toolbar';
+import AttributeEditor from '~components/attribute-editor';
+import Box from '~components/box';
+import BreadcrumbGroup from '~components/breadcrumb-group';
+import Button from '~components/button/internal';
+import Container from '~components/container';
+import Header from '~components/header';
+import Select from '~components/select';
+import SideNavigation from '~components/side-navigation';
+import SpaceBetween from '~components/space-between';
+interface LabelFilter {
+  label: string;
+  operator: string;
+  value: string;
+}
+const LABEL_OPTIONS = [
+  {
+    value: 'alertname',
+  },
+  {
+    value: 'alertstate',
+  },
+  {
+    value: 'job',
+  },
+  {
+    value: 'namespace',
+  },
+  {
+    value: 'severity',
+  },
+  {
+    value: 'instance',
+  },
+];
+const OPERATOR_OPTIONS = [
+  {
+    label: '=',
+    value: '=',
+  },
+  {
+    label: '!=',
+    value: '!=',
+  },
+  {
+    label: '=~',
+    value: '=~',
+  },
+  {
+    label: '!~',
+    value: '!~',
+  },
+];
+const VALUE_OPTIONS = [
+  {
+    value: 'pending',
+  },
+  {
+    value: 'firing',
+  },
+  {
+    value: 'resolved',
+  },
+  {
+    value: 'inactive',
+  },
+];
+function LabelFilters() {
+  const [filters, setFilters] = useState<LabelFilter[]>([
+    {
+      label: 'alertstate',
+      operator: '=',
+      value: 'pending',
+    },
+  ]);
+  const handleAddFilter = () => {
+    setFilters([
+      ...filters,
+      {
+        label: '',
+        operator: '=',
+        value: '',
+      },
+    ]);
+  };
+  const handleRemoveFilter = (itemIndex: number) => {
+    const newFilters = filters.filter((_, index) => index !== itemIndex);
+    setFilters(newFilters);
+  };
+  const updateFilter = (index: number, field: keyof LabelFilter, value: string) => {
+    const newFilters = [...filters];
+    newFilters[index] = {
+      ...newFilters[index],
+      [field]: value,
+    };
+    setFilters(newFilters);
+  };
+  const attributeEditorDefinition = [
+    {
+      // label: 'Label',
+      control: (item: LabelFilter, itemIndex: number) => (
+        <Select
+          variant="group-start"
+          options={LABEL_OPTIONS}
+          selectedOption={LABEL_OPTIONS.find(opt => opt.value === item.label) || LABEL_OPTIONS[0]}
+          onChange={({ detail }) => updateFilter(itemIndex, 'label', detail.selectedOption.value ?? '')}
+        />
+      ),
+    },
+    {
+      // label: 'Operator',
+      control: (item: LabelFilter, itemIndex: number) => (
+        <Select
+          variant="group-middle"
+          options={OPERATOR_OPTIONS}
+          selectedOption={OPERATOR_OPTIONS.find(opt => opt.value === item.operator) || OPERATOR_OPTIONS[0]}
+          onChange={({ detail }) => updateFilter(itemIndex, 'operator', detail.selectedOption.value || '=')}
+        />
+      ),
+    },
+    {
+      control: (item: LabelFilter, itemIndex: number) => (
+        <Select
+          variant="group-middle"
+          options={VALUE_OPTIONS}
+          selectedOption={VALUE_OPTIONS.find(opt => opt.value === item.value) || VALUE_OPTIONS[0]}
+          onChange={({ detail }) => updateFilter(itemIndex, 'value', detail.selectedOption.value ?? '')}
+        />
+      ),
+    },
+  ];
+  return (
+    <AppLayoutToolbar
+      breadcrumbs={
+        <BreadcrumbGroup
+          items={[
+            {
+              href: '#',
+              text: 'Home',
+            },
+            {
+              href: '#',
+              text: 'Label filters',
+            },
+          ]}
+        />
+      }
+      content={
+        <SpaceBetween size="l">
+          <Header description="Define label-based filters to match and route alerts." variant="h1">
+            Label filters
+          </Header>
+          <Container
+            header={
+              <Header
+                description="Specify label key-value pairs to filter alerts. Only alerts matching all filters are shown."
+                variant="h2"
+              >
+                Label filters
+              </Header>
+            }
+            data-venue="true"
+          >
+            <AttributeEditor
+              direction="horizontal"
+              variant="condensed"
+              addButtonText="Add filter"
+              definition={attributeEditorDefinition}
+              empty={
+                <Box color="inherit" textAlign="center">
+                  No filters added. Choose &#34;Add filter&#34; to add a label filter.
+                </Box>
+              }
+              gridLayout={[
+                {
+                  removeButton: {
+                    width: 'auto',
+                  },
+                  rows: [[3, 1, 3]],
+                },
+              ]}
+              items={filters}
+              removeButtonText="Remove"
+              onAddButtonClick={handleAddFilter}
+              onRemoveButtonClick={({ detail }) => handleRemoveFilter(detail.itemIndex)}
+              customRowActions={() => {
+                return <Button iconName="close" variant="condensed-filter"></Button>;
+              }}
+            />
+          </Container>
+        </SpaceBetween>
+      }
+      contentType="form"
+      navigation={
+        <SideNavigation
+          header={{
+            href: '#',
+            text: 'Monitoring',
+          }}
+          items={[
+            {
+              href: '#label-filters-01',
+              text: 'Label filters',
+              type: 'link',
+            },
+          ]}
+        />
+      }
+      toolsHide={true}
+    />
+  );
+}
+export default LabelFilters;
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 82ee041bc7..514d35bd2e 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -2625,6 +2625,20 @@ If more than 6 attributes are specified, a \`gridLayout\` must be provided.
       "optional": false,
       "type": "ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>",
     },
+    {
+      "description": "Vertical by default.",
+      "inlineType": {
+        "name": ""horizontal" | "vertical"",
+        "type": "union",
+        "values": [
+          "horizontal",
+          "vertical",
+        ],
+      },
+      "name": "direction",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "Determines whether the add button is disabled.",
       "name": "disableAddButton",
@@ -2759,6 +2773,18 @@ The display of a row is handled by the \`definition\` property.",
       "optional": true,
       "type": "string",
     },
+    {
+      "inlineType": {
+        "name": "condensed",
+        "type": "union",
+        "values": [
+          "condensed",
+        ],
+      },
+      "name": "variant",
+      "optional": true,
+      "type": "string",
+    },
   ],
   "regions": [
     {
@@ -24019,6 +24045,20 @@ If you want to clear the selection, use \`null\`.",
       "optional": true,
       "type": "string",
     },
+    {
+      "inlineType": {
+        "name": ""group-start" | "group-middle" | "group-end"",
+        "type": "union",
+        "values": [
+          "group-start",
+          "group-middle",
+          "group-end",
+        ],
+      },
+      "name": "variant",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "If you have more than 500 options, enable this flag to apply a performance optimization
 that makes the filtering experience smoother. We don't recommend enabling the feature if you
diff --git a/src/attribute-editor/interfaces.ts b/src/attribute-editor/interfaces.ts
index 157a9e20c8..51c551a823 100644
--- a/src/attribute-editor/interfaces.ts
+++ b/src/attribute-editor/interfaces.ts
@@ -223,4 +223,11 @@ export interface AttributeEditorProps<T> extends BaseComponentProps {
    * @i18n
    */
   i18nStrings?: AttributeEditorProps.I18nStrings<T>;
+
+  variant?: 'condensed';
+
+  /**
+   * Vertical by default.
+   */
+  direction?: 'vertical' | 'horizontal';
 }
diff --git a/src/attribute-editor/internal.tsx b/src/attribute-editor/internal.tsx
index 24f3229736..e6f1b252d0 100644
--- a/src/attribute-editor/internal.tsx
+++ b/src/attribute-editor/internal.tsx
@@ -48,6 +48,8 @@ const InternalAttributeEditor = React.forwardRef(
       __internalRootRef,
       hideAddButton,
       additionalActions,
+      variant,
+      direction = 'vertical',
       ...props
     }: InternalAttributeEditorProps<T>,
     ref: React.Ref<AttributeEditorProps.Ref>
@@ -143,8 +145,15 @@ const InternalAttributeEditor = React.forwardRef(
       <div
         {...baseProps}
         ref={mergedRef}
-        className={clsx(baseProps.className, styles.root)}
-        style={{ gridTemplateColumns: getGridTemplateColumns(gridLayoutForBreakpoint) }}
+        className={clsx(
+          baseProps.className,
+          styles.root,
+          variant && styles[`variant-${variant}`],
+          styles[`direction-${direction ?? 'vertical'}`]
+        )}
+        style={
+          direction === 'horizontal' ? {} : { gridTemplateColumns: getGridTemplateColumns(gridLayoutForBreakpoint) }
+        }
       >
         {isEmpty && <div className={clsx(styles.empty, wasNonEmpty.current && styles['empty-appear'])}>{empty}</div>}
         {items.map((item, index) => (
@@ -162,6 +171,7 @@ const InternalAttributeEditor = React.forwardRef(
             customRowActions={customRowActions}
             onRemoveButtonClick={onRemoveButtonClick}
             removeButtonAriaLabel={removeButtonAriaLabel}
+            parentDirection={direction}
           />
         ))}
 
@@ -182,10 +192,10 @@ const InternalAttributeEditor = React.forwardRef(
                   formAction="none"
                   ref={addButtonRef}
                   ariaDescribedby={infoAriaDescribedBy}
-                  variant={addButtonVariant}
-                  iconName={addButtonVariant === 'inline-link' ? 'add-plus' : undefined}
+                  variant={direction === 'horizontal' ? 'condensed-filter-standalone' : addButtonVariant}
+                  iconName={addButtonVariant === 'inline-link' || direction === 'horizontal' ? 'add-plus' : undefined}
                 >
-                  {addButtonText}
+                  {direction === 'horizontal' ? '' : addButtonText}
                 </InternalButton>
               )}
               {additionalActions}
diff --git a/src/attribute-editor/row.tsx b/src/attribute-editor/row.tsx
index 03e11f415f..6bf643a79d 100644
--- a/src/attribute-editor/row.tsx
+++ b/src/attribute-editor/row.tsx
@@ -29,6 +29,7 @@ interface RowProps<T> {
   customRowActions?: (props: AttributeEditorProps.RowActionsProps<T>) => React.ReactNode;
   onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;
   removeButtonAriaLabel?: (item: T) => string;
+  parentDirection?: 'vertical' | 'horizontal';
 }
 
 function render<T>(
@@ -60,6 +61,7 @@ export const Row = React.memo(
     customRowActions,
     onRemoveButtonClick,
     removeButtonAriaLabel,
+    parentDirection,
   }: RowProps<T>) => {
     const i18n = useInternalI18n('attribute-editor');
 
@@ -85,9 +87,15 @@ export const Row = React.memo(
       ownRow: !removeButtonOnSameLine,
     });
 
+    const withLabels = definition.every(item => !!item.label);
+
     return (
       <div
-        className={clsx(styles.row, layout.rows.length === 1 && styles['single-row'])}
+        className={clsx(
+          styles.row,
+          layout.rows.length === 1 && styles['single-row'],
+          styles[`direction-${parentDirection}`]
+        )}
         role="group"
         aria-labelledby={`${firstControlId}-label ${firstControlId}`}
       >
@@ -118,7 +126,7 @@ export const Row = React.memo(
         })}
         <div
           className={clsx(styles['remove-button-container'], {
-            [styles['remove-button-field-padding']]: removeButtonOnSameLine && index === 0,
+            [styles['remove-button-field-padding']]: withLabels && removeButtonOnSameLine && index === 0,
             [styles['remove-button-own-row']]: !removeButtonOnSameLine,
           })}
           style={{ ...getRemoveButtonGridColumns(layout, gridColumnEnd) }}
diff --git a/src/attribute-editor/styles.scss b/src/attribute-editor/styles.scss
index 2c5823f8f4..8ed33b56d8 100644
--- a/src/attribute-editor/styles.scss
+++ b/src/attribute-editor/styles.scss
@@ -13,6 +13,16 @@
   grid-template-rows: min-content;
   gap: awsui.$space-grid-gutter;
   align-items: start;
+
+  &.variant-condensed {
+    gap: awsui.$space-grid-gutter 0;
+  }
+
+  &.direction-horizontal {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: awsui.$space-grid-gutter;
+  }
 }
 
 .empty {
@@ -23,6 +33,11 @@
 
 .row {
   display: contents;
+
+  &.direction-horizontal {
+    display: flex;
+    margin-inline-end: awsui.$space-grid-gutter;
+  }
 }
 
 .divider {
diff --git a/src/button/internal.tsx b/src/button/internal.tsx
index 8ef126bf7b..c189ebdac5 100644
--- a/src/button/internal.tsx
+++ b/src/button/internal.tsx
@@ -47,7 +47,9 @@ export type InternalButtonProps = Omit<ButtonProps, 'variant'> & {
     | 'breadcrumb-group'
     | 'menu-trigger'
     | 'modal-dismiss'
-    | 'inline-icon-pointer-target';
+    | 'inline-icon-pointer-target'
+    | 'condensed-filter'
+    | 'condensed-filter-standalone';
   badge?: boolean;
   analyticsAction?: string;
   __iconClass?: string;
diff --git a/src/button/styles.scss b/src/button/styles.scss
index 2875849457..5b4205efb3 100644
--- a/src/button/styles.scss
+++ b/src/button/styles.scss
@@ -154,6 +154,33 @@
     border-inline-width: 0;
   }
 
+  &.variant-condensed-filter {
+    padding-inline: awsui.$space-s;
+    padding-block: 5px;
+    border-start-end-radius: styles.$control-border-radius;
+    border-end-end-radius: styles.$control-border-radius;
+    background: awsui.$color-background-button-normal-default;
+    border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+    border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-inline-start: none;
+    color: awsui.$color-text-button-normal-default;
+  }
+
+  &.variant-condensed-filter-standalone {
+    padding-inline: awsui.$space-s;
+    padding-block: 5px;
+    border-start-end-radius: styles.$control-border-radius;
+    border-end-end-radius: styles.$control-border-radius;
+    border-start-start-radius: styles.$control-border-radius;
+    border-end-start-radius: styles.$control-border-radius;
+    background: awsui.$color-background-button-normal-default;
+    border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+    border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
+    color: awsui.$color-text-button-normal-default;
+  }
+
   > .icon-left {
     position: relative;
     // margin-left was breaking layout on firefox
diff --git a/src/internal/components/button-trigger/index.tsx b/src/internal/components/button-trigger/index.tsx
index 92ed21a2ed..37c676ce89 100644
--- a/src/internal/components/button-trigger/index.tsx
+++ b/src/internal/components/button-trigger/index.tsx
@@ -38,6 +38,7 @@ export interface ButtonTriggerProps extends BaseComponentProps {
   onBlur?: CancelableEventHandler<{ relatedTarget: Node | null }>;
   hasCustomContent?: boolean;
   autoFocus?: boolean;
+  variant?: 'group-start' | 'group-middle' | 'group-end';
 }
 
 const ButtonTrigger = (
@@ -63,6 +64,7 @@ const ButtonTrigger = (
     onBlur,
     hasCustomContent = false,
     autoFocus,
+    variant,
     ...restProps
   }: ButtonTriggerProps,
   ref: React.Ref<HTMLButtonElement>
@@ -84,7 +86,8 @@ const ButtonTrigger = (
       inFilteringToken && styles['in-filtering-token'],
       inFilteringToken && styles[`in-filtering-token-${inFilteringToken}`],
       inlineTokens && styles['inline-tokens'],
-      !!hasCustomContent && styles['custom-option']
+      !!hasCustomContent && styles['custom-option'],
+      !!variant && styles[`variant-${variant}`]
     ),
     disabled: disabled,
     'aria-expanded': pressed,
diff --git a/src/internal/components/button-trigger/styles.scss b/src/internal/components/button-trigger/styles.scss
index c654bd1acc..4a4a476270 100644
--- a/src/internal/components/button-trigger/styles.scss
+++ b/src/internal/components/button-trigger/styles.scss
@@ -33,6 +33,25 @@ $padding-block-inner-filtering-token: 0px;
   border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   min-block-size: awsui.$size-vertical-input;
 
+  &.variant-group-start {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  &.variant-group-middle {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    border-inline-start: none;
+  }
+
+  &.variant-group-end {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-inline-start: none;
+  }
+
   &.in-filtering-token-root,
   &.in-filtering-token-nested {
     padding-block: $padding-block-inner-filtering-token;
diff --git a/src/select/interfaces.ts b/src/select/interfaces.ts
index 2ad5381151..65ec1a5c0e 100644
--- a/src/select/interfaces.ts
+++ b/src/select/interfaces.ts
@@ -196,6 +196,8 @@ export interface SelectProps extends BaseSelectProps {
    * @awsuiSystem core
    */
   renderOption?: SelectProps.SelectOptionItemRenderer;
+
+  variant?: 'group-start' | 'group-middle' | 'group-end';
 }
 
 export namespace SelectProps {
diff --git a/src/select/internal.tsx b/src/select/internal.tsx
index da78704986..74e5f6c752 100644
--- a/src/select/internal.tsx
+++ b/src/select/internal.tsx
@@ -71,6 +71,7 @@ const InternalSelect = React.forwardRef(
       __inFilteringToken,
       __internalRootRef,
       renderOption,
+      variant,
       ...restProps
     }: InternalSelectProps,
     externalRef: React.Ref<SelectProps.Ref>
@@ -172,6 +173,7 @@ const InternalSelect = React.forwardRef(
 
     const trigger = (
       <Trigger
+        variant={variant}
         renderOption={renderOption}
         ref={triggerRef}
         placeholder={placeholder}
diff --git a/src/select/parts/trigger.tsx b/src/select/parts/trigger.tsx
index cb2c2a8677..b65ae2f6eb 100644
--- a/src/select/parts/trigger.tsx
+++ b/src/select/parts/trigger.tsx
@@ -30,6 +30,7 @@ export interface TriggerProps extends FormFieldValidationControlProps {
   inFilteringToken?: 'root' | 'nested';
   selectedOptions?: ReadonlyArray<OptionDefinition>;
   renderOption?: SelectProps.SelectOptionItemRenderer;
+  variant?: 'group-start' | 'group-middle' | 'group-end';
 }
 
 const Trigger = React.forwardRef(
@@ -51,6 +52,7 @@ const Trigger = React.forwardRef(
       disabled,
       readOnly,
       renderOption,
+      variant,
     }: TriggerProps,
     ref: React.Ref<HTMLButtonElement>
   ) => {
@@ -145,6 +147,7 @@ const Trigger = React.forwardRef(
         hasCustomContent={hasCustomContent}
         ariaDescribedby={ariaDescribedby}
         ariaLabelledby={ariaLabelledbyIds}
+        variant={variant}
       >
         {triggerContent}
       </ButtonTrigger>