Why not button active state?

[tombohub]

Why does default button implements hover state, but not active? What's the reasoning?

[openjkai]

From my point of view, Active states are often unnecessary and can create poor UX.
And if you need active status you can customize the code.

// Custom button with active state
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

export function CustomButton({ className, ...props }) {
  return (
    <Button
      className={cn(
        "transition-all duration-150",
        "active:scale-95 active:bg-primary/80",
        "focus-visible:ring-2 focus-visible:ring-ring",
        className
      )}
      {...props}
    />
  )
}

[tombohub]

what do you use so user knows button is clicked?

[degrovejazz]

@openjkai thanks for writing up the cuztomization for this. I'm curious why active state would be bad UX? I have used it for decades to indicate a section is open, along with other uses, in place of a section title. @tombohub thanks for the question.