Component

ActionRail

Group compact actions vertically or horizontally for toolbars, side rails, and social links.

Usage

Import the component entry and start with its smallest complete example.

Import

import { ActionRail } from "@chitrank2050/monoline-ui/action-rail"

Basic usage

<ActionRail orientation="vertical">
  <Button variant="ghost" icon>🐦</Button>
  <Button variant="ghost" icon>🐙</Button>
  <Button variant="ghost" icon>💼</Button>
</ActionRail>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

A compact row or column of related buttons and links fits ActionRail well.

Avoid when

The controls form primary navigation or need the container to manage selection state.

Accessibility

ActionRail adds no control semantics of its own. Keep each child's native semantics, and label the group when the relationship between its controls is not obvious.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

orientationvertical | horizontalFlow direction layout

Implementation

The source used by the example above, including any state it needs.

import { ActionRail } from "@chitrank2050/monoline-ui/action-rail"
import { Button } from "@chitrank2050/monoline-ui/button"

export function Toolbar() {
  return (
    <ActionRail orientation="horizontal">
      <Button variant="secondary">Back</Button>
      <Button>Save</Button>
    </ActionRail>
  )
}

Compare related components or review the package and theme setup.

01ComponentButtonComponent · ReferenceReference→02ComponentNavbarComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview