M3 Expressive Button

A press-ripple button with Material 3 Expressive variants (filled, tonal, elevated, outlined, text), sizes, round/square shapes and icon-only widths, for shadcn/ui + Tailwind apps.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds M3 Expressive Button to your project and fits it to your theme.

import { Button } from "@/components/ui/button";

export default function Demo() {
  return (
    <Button
      variant="tonal"
      render={
        <a href="https://m3.material.io" target="_blank" rel="noreferrer">
          Material Design
        </a>
      }
      nativeButton={false}
    />
  );
}