Skip to content

[feat]: Add default active styles for Button component #8960

@Gianthard-cyh

Description

@Gianthard-cyh

Feature description

Description

Currently, the Button component in shadcn/ui does not provide any default :active styles.
When users click or tap a button, there is no visual feedback for the active state, which slightly affects the overall interaction experience, especially on mobile devices.

Motivation

Adding a subtle default active style (e.g. slight scale-down, brightness change, or ring effect) would:

  • Improve perceived responsiveness
  • Provide better interaction feedback
  • Align with common UX practices for interactive components

Suggested Implementation (Optional)

Add active:scale-[0.98] active:brightness-95 as a default class for button components.
(or a slight inset shadow / darker shade / tiny scale-down), applied optionally based on variant or theme to respect design flexibility.

I can open a PR if this is something maintainers would like to include.

Affected component/components

Button

Additional Context

There is also a good discussion about whether active/pressed states are still necessary in modern UI design here:
https://ux.stackexchange.com/questions/148437/do-we-still-need-an-active-pressed-state-for-a-button

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues and PRs

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions