Dropdown is a styled wrapper around the Popper component and shares the same API. Refer to Popper documentation if you need any customization.

Basic usage

import React from 'react';
import Button from '@semcore/ui/button';
import Dropdown from '@semcore/ui/dropdown';
import { Text } from '@semcore/ui/typography';

const Demo = () => (
  <Dropdown>
    <Dropdown.Trigger id='dropdown-basic' tag={Button}>
      About export
    </Dropdown.Trigger>
    <Dropdown.Popper p={4} wMax={260} aria-labelledby='dropdown-basic'>
      <Text size={200}>You can export up to 300 records in CSV or PDF format.</Text>
    </Dropdown.Popper>
  </Dropdown>
);

export default Demo;

Focus interaction

import React from 'react';
import Button from '@semcore/ui/button';
import Dropdown from '@semcore/ui/dropdown';
import { Text } from '@semcore/ui/typography';

const Demo = () => (
  <Dropdown interaction={'focus'}>
    <Dropdown.Trigger id='dropdown-focus' tag={Button}>
      About export
    </Dropdown.Trigger>
    <Dropdown.Popper p={4} wMax={260} aria-labelledby='dropdown-focus'>
      <Text size={200}>You can export up to 300 records in CSV or PDF format.</Text>
    </Dropdown.Popper>
  </Dropdown>
);

export default Demo;