Dropdown

​

Import

import { Dropdown } from '@luminescent/ui-react';

​

Usage

import { Dropdown } from '@luminescent/ui-react';
import { useState } from 'react';

function Example() {
  const [opened, setOpened] = useState(false);

  return (
    <Dropdown 
      opened={opened}
      onClick={() => setOpened(!opened)}
    >
      Select an option
    </Dropdown>
  );
}

​

Props

​

Behavior

• The component automatically applies the lum-btn class and renders as a button with type="button"
• The chevron icon rotates 180 degrees when opened is true
• When hover is enabled, the chevron rotates on hover with smooth transitions
• Focus states also trigger the chevron rotation
• All transitions use ease-out timing with motion-safe preferences respected

​

Examples

import { Dropdown } from '@luminescent/ui-react';
import { useState } from 'react';

function Basic() {
  const [opened, setOpened] = useState(false);

  return (
    <Dropdown 
      opened={opened}
      onClick={() => setOpened(!opened)}
    >
      Click to toggle
    </Dropdown>
  );
}