LabelMenuButton

LabelMenuButton is a button that displays both a label and the selected value, used as the trigger for Select.

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage

Pass the field name to the label prop and use LabelMenuButton with SelectTrigger asChild. The selected value is shown beneath the label.


"use client";
 
import {
  LabelMenuButton,
  Select,
  SelectContent,
  SelectTrigger,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <Select
      options={[
        { label: "No priority", value: "" },
        { label: "Urgent", value: "Urgent" },
        { label: "High", value: "High" },
        { label: "Medium", value: "Medium" },
        { label: "Low", value: "Low" },
      ]}
    >
      <SelectTrigger asChild w="224">
        <LabelMenuButton label="Priority" />
      </SelectTrigger>
      <SelectContent />
    </Select>
  );
}

#
Related

Select

Select a value from a list of options inside a dropdown menu.

#
Props

#
LabelMenuButton

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

Prop
`addon` Which addons sit alongside the button label. Set internally by `Button` based on the leading/trailing content. @internal `"none" \| "end" \| "start" \| "both" \| "only"`
`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`
`label*` The label of the button. `string`
`loading` Whether to show loading spinner inside the button. `false \| true`
`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"`

#
Changelog

#
1.1.2

Added component