A setting: buttons drawn with icons, labels, or both #852

New issue

Closed

opened 2026-10-10 16:01:24 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-10 16:01:24 +00:00

Owner

A setting in Appearance: action buttons show icons only, labels only, or both. With icons only, the label shows as a tooltip and stays the button's name.

What exists today

Nothing like it. Appearance has theme, navigation order, identifier order, career order, density (accounts/models.py:377-440). Icon-only buttons name themselves with aria-label (c-remove-button); Postulo's tooltip is its own popover paragraph, not Basecoat's [data-tooltip] (app.css:1710-1735, app.js:~4697-4800). #837 and #838 propose title plus an sr-only label for icon-only footer links.

What would change

Profile.button_labels (both, icons, labels), a body attribute, and CSS on a shared button markup (icon + label span) that hides one or the other; the label sr-only when hidden, and a tooltip.
Applies to the button groups of #851 (company actions), #858 (calendar navigation) and #841.

Decisions

Which buttons. Recommended: those drawn through a shared component with both an icon and a label; text-only buttons are untouched, and labels only hides their icons.
Default both. Recommended.

Checked against main at 8c3d03570. From the maintainer's improvements list of 2026-10-07.

A setting in Appearance: action buttons show icons only, labels only, or both. With icons only, the label shows as a tooltip and stays the button's name. ## What exists today - Nothing like it. Appearance has theme, navigation order, identifier order, career order, density (`accounts/models.py:377-440`). Icon-only buttons name themselves with `aria-label` (`c-remove-button`); Postulo's tooltip is its own popover paragraph, not Basecoat's `[data-tooltip]` (`app.css:1710-1735`, `app.js:~4697-4800`). #837 and #838 propose `title` plus an `sr-only` label for icon-only footer links. ## What would change - `Profile.button_labels` (`both`, `icons`, `labels`), a body attribute, and CSS on a shared button markup (icon + label span) that hides one or the other; the label `sr-only` when hidden, and a tooltip. - Applies to the button groups of #851 (company actions), #858 (calendar navigation) and #841. ## Decisions - **Which buttons.** Recommended: those drawn through a shared component with both an icon and a label; text-only buttons are untouched, and *labels only* hides their icons. - **Default** both. Recommended. Checked against `main` at `8c3d03570`. From the maintainer's improvements list of 2026-10-07.

tiagoagueda added this to the 0.6.0 milestone

2026-10-10 16:01:24 +00:00

tiagoagueda added the

interface

enhancement

accessibility

labels

2026-10-10 16:01:24 +00:00

tiagoagueda referenced this issue

2026-10-10 16:02:00 +00:00

Company page: Edit, Merge, Delete and Export as one group, with the export choices in a popover #851

tiagoagueda referenced this issue