DisclosureButton

A compact, content-hugging ghost trigger with a trailing chevron that rotates while the thing it opens is open. Use it where a value or label doubles as a control — “Plan: Pro ⌄” that opens a menu, “Shipping details ⌄” that opens a popover — and the full-size, padded Button would be too heavy.

It is a trigger, not a standalone button — always render it as the render target of a disclosure’s trigger (Popover, DropdownMenu, Collapsible, …). It carries no action/loading semantics; its only job is to toggle and reflect a disclosure.

Open state is automatic

You never track open state. base-ui sets data-popup-open (popovers, menus) or data-panel-open (collapsibles) on the element it renders, and DisclosureButton reflects that in CSS — the open background and the chevron rotation. Spread the trigger props onto it:

import {
  DisclosureButton,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@vesyl/ui-next";

export default function DisclosureButtonPopover() {
  return (
    <Popover>
      <PopoverTrigger
        render={(props) => (
          <DisclosureButton {...props}>Shipping details</DisclosureButton>
        )}
      />
      <PopoverContent align="start" className="w-64 gap-2">
        <p className="text-sm font-medium">Ground · 3–5 business days</p>
        <p className="text-muted-foreground text-sm">
          Tracking updates twice daily. Signature not required.
        </p>
      </PopoverContent>
    </Popover>
  );
}

import { DisclosureButton, Popover, PopoverContent, PopoverTrigger } from "@vesyl/ui-next";

<Popover>
  <PopoverTrigger
    render={(props) => <DisclosureButton {...props}>Shipping details</DisclosureButton>}
  />
  <PopoverContent>…</PopoverContent>
</Popover>;

In a DataList

The intended home: a DataListItem’s value, where the label sits left and the action sits right. Here the value is a DropdownMenu that opens from a DisclosureButton.

Customer: Acme Logistics
Plan
Status: Active

import { useState } from "react";
import {
  DataListItem,
  DataListRoot,
  DisclosureButton,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@vesyl/ui-next";

type Plan = "free" | "pro" | "enterprise";

const PLAN_LABELS: Record<Plan, string> = {
  free: "Free",
  pro: "Pro",
  enterprise: "Enterprise",
};

export default function DisclosureButtonDataList() {
  const [plan, setPlan] = useState<Plan>("pro");

  return (
    <DataListRoot className="max-w-sm">
      <DataListItem label="Customer" value="Acme Logistics" />
      <DataListItem
        label="Plan"
        value={
          <DropdownMenu>
            <DropdownMenuTrigger
              render={(props) => (
                <DisclosureButton {...props} aria-label="Change plan">
                  {PLAN_LABELS[plan]}
                </DisclosureButton>
              )}
            />
            <DropdownMenuContent align="end">
              <DropdownMenuRadioGroup
                value={plan}
                onValueChange={(value) => setPlan(value as Plan)}
              >
                <DropdownMenuRadioItem value="free">Free</DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="enterprise">
                  Enterprise
                </DropdownMenuRadioItem>
              </DropdownMenuRadioGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        }
      />
      <DataListItem label="Status" value="Active" />
    </DataListRoot>
  );
}

Custom icon

The trailing indicator defaults to a chevron-down and rotates 180° on open. Override it with icon. A custom icon does not rotate by default (a flipped gear or ”+” rarely reads well) — opt in with rotateOnOpen.

import { PlusIcon } from "lucide-react";

// Static custom icon:
<DisclosureButton icon={<PlusIcon className="size-4" />}>Add filter</DisclosureButton>

// Custom icon that still flips on open:
<DisclosureButton icon={<PlusIcon className="size-4" />} rotateOnOpen>Add filter</DisclosureButton>

Relationship to ColumnAction

ColumnActionTrigger is the table flavor of this component — a DisclosureButton with cell-padding alignment and a chevron that stays faint until the row is hovered. That faint/row-reveal behavior is table-specific and lives in ColumnAction; DisclosureButton itself is always-visible and table-agnostic. Reach for DisclosureButton anywhere that isn’t a data-table row.

Reference

DisclosureButton

Extends native <button> props. Render it as a base-ui trigger’s render target.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Trigger content, left of the indicator
`icon`	`ReactNode`	chevron-down	Trailing disclosure indicator
`rotateOnOpen`	`boolean`	`true` for the default chevron, else `false`	Rotate the indicator 180° while the disclosure is open
`iconClassName`	`string`	—	Classes merged onto the indicator — the chevron itself by default, the wrapper for a custom `icon`
`…`	`button` props	—	Forwarded to the underlying `<button>` (incl. `ref`, base-ui trigger props)