EllipsisMenuButton

EllipsisMenuButton is a button with a trailing ellipsis icon, used as the trigger for overflow menus and dropdowns.

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage

Use EllipsisMenuButton with MenuTrigger asChild to open overflow menus. Remember to provide an aria-label since the button has no visible text.


import { IconArrowRightFromBracket, IconUser } from "@optiaxiom/icons";
import {
  EllipsisMenuButton,
  Menu,
  MenuContent,
  MenuTrigger,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <Menu
      options={[
        {
          addon: <IconUser />,
          label: "View profile",
        },
        {
          addon: <IconArrowRightFromBracket />,
          label: "Logout",
        },
      ]}
    >
      <MenuTrigger asChild>
        <EllipsisMenuButton appearance="subtle" aria-label="My account" />
      </MenuTrigger>
      <MenuContent />
    </Menu>
  );
}

#
Related

Button

Button component is used to trigger actions.

#
Props

#
EllipsisMenuButton

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`addonAfter` Display content inside the button after `children`. `ReactNode`
`addonBefore` Display content inside the button before `children`. `ReactNode`
`appearance` Control the appearance by selecting between the different button types. `"default" \| "danger" \| "primary" \| "subtle" \| "danger-outline" \| "default-opal" \| "inverse" \| "primary-opal"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`
`disabled` Whether the button is disabled. `false \| true`
`icon` Display an icon before or after the button content or omit `children` to only show the icon. `ReactNode`
`iconPosition` Control whether to show the icon before or after the button content. `"end" \| "start"`
`loading` Whether to show loading spinner inside the button. `false \| true`
`size` Control the size of the button. `"sm" \| "md" \| "lg"`
`square` Whether button should have square shape. `false \| true`
`type` The default behavior of the button. `"button" \| "reset" \| "submit"`

#
Changelog

#
0.12.1

Added component