Skip to content

Add BareButton design-system primitive #7626

@talissoncosta

Description

@talissoncosta

When we need a clickable surface that doesn't look like a button (stepper steps, selectable cards, list rows), the current options are both bad:

  • <div role='button' tabIndex={0} onKeyDown={…}> — manual keyboard handling, easy to get wrong, no disabled semantics
  • <button> + per-component all: unset or manual resets — repeats the reset everywhere, easy to drift

A BareButton primitive would give us all the semantics and accessibility of a native button (focus, disabled, keyboard, screen-reader role) with no visual styling, so it can wrap any clickable surface.

Scope

  • New component, likely under web/components/base/forms/BareButton/
  • Renders <button type='button'> with browser defaults reset (all: unset + minimal layout primitives)
  • Forwards refs, accepts all <button> props
  • Storybook story + Jest test

Migration targets (follow-up PRs)

Context

Came up on PR #7596 and earlier on #7581 — same pattern twice in two weeks. Cheaper to extract a primitive than fix each instance with manual all: unset.

Metadata

Metadata

Assignees

No one assigned

    Labels

    design-systemfront-endIssue related to the React Front End Dashboardtech-debtTechnical debt issues

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions