Skip to content

The disabled submit button reads as a broken primary button #131

Description

@Bccorb

Found reviewing the sign-in screen as it appears inside
seamless-idea-web, which
themes this package through the --seamless-* bridge.

What it looks like

On the registration screen, Register is disabled until the email is valid,
and while disabled it is painted as a solid, filled, mid-grey button. That is the
shape and weight of a primary button that has stopped working, on the screen with
the highest stakes in that product's funnel.

button disabled: true
background:      rgb(153, 162, 179)   from --seamless-disabled
label colour:    rgb(11, 16, 32)      from --seamless-accent-contrast

Why the consuming app cannot fix it

--seamless-disabled is used exactly once, as a background-color, and the
label keeps --seamless-accent-contrast, which flips between light and dark with
the theme. So every value an application can supply improves one theme and breaks
the other:

  • lighten it, and white-on-pale fails in the light theme
  • darken it, and near-black-on-dark fails in the dark theme

There is no value that works for both, because the two colours are chosen in
different places. That is why this is filed here rather than fixed there.

Suggested

Give the disabled state its own pair, or drop the fill entirely: a disabled
control usually reads better as an outline or a reduced-opacity version of the
enabled one than as a filled button in a different colour.

Worth pairing with saying why it is disabled. The consuming product replaced
its own disabled submit with a line that says which of three things is true (no
words yet, not enough yet, ready when you are), and that turned out to matter
more than the colour did, because the person a silent refusal fails is the one
least likely to guess the reason.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions