Shadcn button events - v0 by Vercel

Yes, buttons in shadcn/ui are handled as regular button events like onClick(). The shadcn/ui Button component is built on top of the native HTML <button> element, so it supports all standard button events 1.

Here's an example of how you can use the onClick event with a shadcn/ui Button:

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

function MyComponent() {
  const handleClick = () => {
    alert('Button clicked!');
  }

  return (
    <Button onClick={handleClick}>
      Click me
    </Button>
  )
}

In this example, the handleClick function will be called when the button is clicked, just like with a regular HTML button 1.

Additionally, shadcn/ui buttons support other standard button events such as onMouseEnter, onMouseLeave, onFocus, onBlur, etc. You can use these events in the same way you would with a regular button 1.

If you need to use the button as a link, you can use the asChild prop and nest a link component inside the Button. For example:

import { Button } from "@/components/ui/button"
import Link from "next/link"

function MyComponent() {
  return (
    <Button asChild>
      <Link href="/some-page">Go to page</Link>
    </Button>
  )
}

This approach allows you to maintain the button's styling while using it as a link 1.

Here's an example of how you can use the onClick event with a shadcn/ui Button:

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

function MyComponent() {
  const handleClick = () => {
    alert('Button clicked!');
  }

  return (
    <Button onClick={handleClick}>
      Click me
    </Button>
  )
}

In this example, the handleClick function will be called when the button is clicked, just like with a regular HTML button 1.

If you need to use the button as a link, you can use the asChild prop and nest a link component inside the Button. For example:

import { Button } from "@/components/ui/button"
import Link from "next/link"

function MyComponent() {
  return (
    <Button asChild>
      <Link href="/some-page">Go to page</Link>
    </Button>
  )
}

This approach allows you to maintain the button's styling while using it as a link 1.