How the buttons look

Networks → Style. Twelve styles, three corner shapes, three sizes. Each option in the picker is drawn in the style it names, with a line under it saying what it looks like, so there is nothing to imagine.

• Solid — filled buttons in each network's colour. The default.
• Outline — a ring in the colour, and nothing inside it.
• Soft — a pale tint of the colour behind the words.
• Minimal — the mark and the name, with no button around them.
• Pill — filled buttons with fully rounded ends.
• Marks only — the network marks alone, in hard-cornered squares. Never shows names.
• Segment — the buttons joined edge to edge into one strip, divided by hairlines and rounded only at the two ends, with no fill until one is pointed at. The quiet option for a busy page: one object rather than six coloured blocks. The floating rail becomes a single joined column and the pinned bar one segmented control. A strip is one object and cannot wrap, so with more networks than the column is wide it scrolls sideways instead of squeezing the marks.
• Stack — the mark in a coloured tile with the name underneath, the way a phone's own share sheet is laid out. Only the mark is printed on a brand colour; the names are your theme's text, so they read like the rest of the page. Always shows names — see below. Pinned to the bottom of a phone there is no room for a name beside a 50px tile, so the bar shows marks only there.
• Two-tone — the mark on a block of the network's colour at the start of the button, the name beside it in your theme's text, a hairline around the whole.
• Raised — a pale card with a hairline and a soft shadow, the mark in the network's colour and the name in your text. A row of small cards.
• Underline — no box: the mark in the colour and the name in your text, over a two-pixel bar of the colour.
• Badge — the mark in a round coin of the colour with the name beside it, and nothing else drawn, the way a byline lists where an author can be found.

• Show network names — names help on a desktop and crowd a phone. "Wide screens only" is the default and usually right. Two styles settle this themselves and grey the menu: Marks only never shows names, Stack always does.
• Colour — each network's own brand colour, one neutral, or one colour you choose. Brand colours are more recognisable; a single colour is calmer.
• Alignment — left, centred, right, or stretched to fill the width.

The buttons inherit your theme's font. Nothing here sets a typeface.

Every button is readable in every style, to the WCAG AA standard. The label colour is worked out for each network's colour: WhatsApp, Telegram, Reddit and Bluesky have dark labels, because white on their bright colours cannot be read, and Facebook and Mastodon keep white labels on a very slightly deeper shade of their blue and purple. Outline, Soft and Minimal write each network's colour on the page, a shade deeper where the brand colour is too pale for words. A custom colour gets the same treatment. Segment writes the colour on the page the same way and separates its buttons with a neutral hairline that is 3.2:1 against a white page. Stack puts the mark on the colour and the name in your theme's own text colour, so a name is exactly as readable as the article it sits under. When a button has keyboard focus it shows a dark ring with a white edge, which reads on a light page and on a dark one.

The heading above the buttons uses your theme's text colour at full strength. It used to be faded to 65% of it, which fails the standard on any theme whose body text is lighter than about #2A2A2A.

Text holds the words around the buttons.

• Show a heading above the buttons — switch it off for no heading at all.
• Heading — leave it empty and readers see the default, "Share this", translated into your site's language; the default is shown greyed in the box. Type your own words to replace it. The floating rail and the pinned bar never show a heading.
• Copy confirmation — the short message after Copy link or More. Empty works the same way as the heading: the default, in your site's language. It is written into a status area that is on the page, empty, from the start and is emptied before each copy, which is what a screen reader needs to read it out every time, the first copy included. A keyboard visitor stays on the button they pressed.