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>
  );
}

Button

Button component is used to trigger actions.

#
Props

#
EllipsisMenuButton


import { EllipsisMenuButton } from "@optiaxiom/react";
// or
import { EllipsisMenuButton } from "@optiaxiom/react/ellipsis-menu-button";

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` Show a loading spinner and mark the button `aria-busy`. The button stays focusable and clickable: don’t also set `disabled`, which drops keyboard focus mid-action, and ignore repeat clicks in `onClick` if the action shouldn’t run twice. Nothing is announced when loading starts or ends, so tell screen reader users the outcome yourself, e.g. with a toast. `false \| true`
`size` Control the size of the button. `"sm" \| "md" \| "lg"`
`square` Whether button should have square shape (an icon-only button with no label). `false \| true`
`type` The default behavior of the button. `"button" \| "reset" \| "submit"`

#
Accessibility

#
Labels

Without children the button shows only the ellipsis icon. Give it an aria-label naming what the menu acts on, such as “Article actions”. Button logs a console error when the label is missing.

#
Changelog

#
0.12.1

Added component