SocialDock styling is controlled at the dock level so Share and Link items can use one consistent visual system.

Layout

Use Gutter for spacing, Align for the group position, and Stacked to control when buttons form a vertical layout. The responsive stacking breakpoint, full-width, and equal-width options help the dock fit narrow screens.

  • Fullwidth lets the group use the available width.

  • Equal Width gives buttons a consistent width.

  • Icon only removes visible button text.

Button shape and size

Choose the button size and a rounded, square, or pill shape. Then refine radius, icon size, label size, and horizontal and vertical padding. Icon-only buttons can also use the circular presentation.

Labels

Labels can remain visible, be hidden, or appear as hover labels. A custom per-item label overrides generic wording. On touch devices there is no dependable hover, so do not rely on hover labels as the only explanation of an unfamiliar icon.

Colors and borders

Choose the brand-color treatment, enable a border if required, and configure its width, style, and color. Check custom SVG icons with the selected treatment. The Auto, Light, and Dark themes let the dock follow or override the surrounding appearance.

Responsive review

Check the dock at its stacking breakpoint and at the narrowest supported width. Long labels, large icons, full-width buttons, and equal-width layouts can produce very different results from a compact icon row.

Related: Getting started with SocialDock and Troubleshooting SocialDock and improving accessibility.