104Get started
HextaUI

Popover: Disabled

A disabled trigger never opens its popover.

import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

export function PopoverDisabled() {
  return (
    <Popover>
      <PopoverTrigger disabled render={<Button variant="outline" />}>
        Disabled
      </PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Never shown</PopoverTitle>
      </PopoverContent>
    </Popover>
  )
}

Add this example

This adds the example as components/examples/popover/disabled.tsx, together with the Popover component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/popover-disabled.json

To add only the component, follow the Popover installation.

Props in this example

The Popover props this example sets, from the API reference.

PopoverTrigger

PropTypeDefault
disabled
booleanfalse
render
ReactElement | (props, state) => ReactElement<button>

Every prop is in the Popover API reference.

More Popover examples

See them all, with keyboard support and accessibility notes, on the Popover page.

Related components