Button Dropdown

Installation

Usage

import ButtonDropdown from "@/components/ruixen/button-dropdown";
 
const options = [
  { label: "Edit", value: "edit" },
  { label: "Duplicate", value: "duplicate" },
  { label: "Archive", value: "archive" },
  { label: "Delete", value: "delete", destructive: true },
];
 
export default function MyComponent() {
  return (
    <ButtonDropdown options={options} onSelect={(value) => console.log(value)}>
      Actions
    </ButtonDropdown>
  );
}

Props

Prop	Type	Default	Description
`options`	`{ label: string; value: string; destructive?: boolean }[]`	-	Dropdown menu options
`onSelect`	`(value: string) => void`	-	Callback when option is selected
`variant`	`"default" \| "outline" \| "secondary"`	`"default"`	Button style variant
`className`	`string`	-	Additional CSS classes

Features

Integrated dropdown menu
Support for destructive actions
Chevron indicator for dropdown
Keyboard navigation support
Light and dark mode support