Skip to content
FFuzzy

Reference

Filters and Blocks: Buttons Skin Settings

Manual Reference for buttons skin settings block-level options in the Fuzzy Filter Editor.

Updated May 25, 2026SEO-ready8 options

— title: Filter Editor Filters: Buttons Skin Settings description: Manual Reference for button-style filter options. doc_type: reference section: Filter Editor audience: Store owners, catalog managers, developers, and support manual_reference: true parent_page: reference/filter-editor-filters-blocks.md option_count: 8 updated: 2026-05-24 source_refs: – _docs/Final/options/fe-tab2-filters.md – _docs/Final/html/05_tab2.html ai_summary: Covers button fill, size, shape, selected state, label visibility, and icon settings. status: needs-verification —

This page covers Buttons Skin Settings options for individual filter blocks in the Filter Editor. Use it with the Filters and Blocks index when navigating the full block-level Reference.

Buttons Skin Settings

Fill Style

  • Public label: Fill Style
  • Location: Filter Editor > Filters / Blocks > Buttons Skin Settings
  • Type: Select
  • Default value: Outline
  • Shown when: Display Type is Buttons.
  • Availability: Free setting inside the selected skin; skin availability follows Display Type.
  • What it does: Sets the default visual treatment of buttons, such as solid, outline, ghost, or soft.
  • When to use: Choose the style that best fits the store's button system.
  • Side effects / performance notes: Very subtle button styles need strong selected states.
  • Related options: Selected Style (Buttons), Accent Color.

Size (Buttons)

  • Public label: Size
  • Location: Filter Editor > Filters / Blocks > Buttons Skin Settings
  • Type: Preset
  • Default value: M
  • Shown when: Display Type is Buttons.
  • Availability: Free setting inside the selected skin; skin availability follows Display Type.
  • What it does: Sets button padding, text size, and minimum height.
  • When to use: Use larger sizes for touch-heavy filters and smaller sizes for dense desktop filters.
  • Side effects / performance notes: Large sizes can create wrapping in horizontal layouts.
  • Related options: Gap Between Items, touch-friendly mobile sizing.

Shape (Buttons)

  • Public label: Shape
  • Location: Filter Editor > Filters / Blocks > Buttons Skin Settings
  • Type: Select
  • Default value: Rounded
  • Shown when: Display Type is Buttons.
  • Availability: Free setting inside the selected skin; skin availability follows Display Type.
  • What it does: Sets button corner shape.
  • When to use: Match it to the storefront's design language.
  • Side effects / performance notes: Pill shapes can become awkward with very long labels.
  • Related options: Global swatch shape.

Selected Style (Buttons)

  • Public label: Selected Style
  • Location: Filter Editor > Filters / Blocks > Buttons Skin Settings
  • Type: Select
  • Default value: Filled
  • Shown when: Display Type is Buttons.
  • Availability: Free setting inside the selected skin; skin availability follows Display Type.
  • What it does: Defines how selected button values are marked.
  • When to use: Use filled or filled-with-check for strong selected feedback.
  • Side effects / performance notes: Weak selected styles can make active filters hard to recognize.
  • Related options: Fill Style, Accent Color.

Label Visibility

  • Public label: Label Visibility
  • Location: Filter Editor > Filters / Blocks > Buttons Skin Settings
  • Type: Select
  • Default value: Always
  • Shown when: Display Type is Buttons.
  • Availability: Free setting inside the selected skin; skin availability follows Display Type.
  • What it does: Controls whether button text is always shown or replaced by icons.
  • When to use: Keep labels visible unless icons are unmistakable and accessible.
  • Side effects / performance notes: Icon-only buttons need accessible names and tooltips.
  • Related options: Icon Support.

Icon Support

  • Public label: Icon Support
  • Location: Filter Editor > Filters / Blocks > Buttons Skin Settings
  • Type: Toggle
  • Default value: Off
  • Shown when: Display Type is Buttons.
  • Availability: Free setting inside the selected skin; skin availability follows Display Type.
  • What it does: Enables per-value icons in button displays.
  • When to use: Use it when terms have meaningful icons that make selection faster.
  • Side effects / performance notes: Missing icons can make the button set look inconsistent.
  • Related options: Icon Position, Icon Size, Label Visibility.

Icon Position

  • Public label: Icon Position
  • Location: Filter Editor > Filters / Blocks > Buttons Skin Settings
  • Type: Select
  • Default value: Left
  • Shown when: Icon Support is on.
  • Availability: Free setting inside the selected skin; skin availability follows Display Type.
  • What it does: Places the icon before, after, or instead of the label.
  • When to use: Use left or right for icon-plus-label buttons; use icon-only only when the icon is self-explanatory.
  • Side effects / performance notes: Icon-only layouts require strong accessibility labeling.
  • Related options: Icon Support, Label Visibility.

Icon Size

  • Public label: Icon Size
  • Location: Filter Editor > Filters / Blocks > Buttons Skin Settings
  • Type: Select
  • Default value: Medium
  • Shown when: Icon Support is on.
  • Availability: Free setting inside the selected skin; skin availability follows Display Type.
  • What it does: Sets the icon size relative to the button.
  • When to use: Increase it for icon-led controls, reduce it when the text label is primary.
  • Side effects / performance notes: Oversized icons can crowd short buttons.
  • Related options: Icon Support, Size.