Left Liquid Background
Right Liquid Background

Action Buttons

The Action Buttons preset provides a collection of quick-access controls designed for contextual actions. Ideal for toolbars, card footers, and floating action layouts.

Quick Links

Installation

Install the presets individually or as part of the complete @aristobyte-ui library.

Installation of Action Buttons

Install the Action Buttons preset individually. You may skip if @aristobyte-ui is already part of your project.

Package Manager

Individual Package

Install only the presets if you need specific functionality.

Full Library

Skip this if you have the complete @aristobyte-ui already installed.

Import

Choose between individual package imports or global library imports based on your project's needs and bundle size requirements.

Import Action Buttons

Import Action Buttons into your UI to streamline repetitive tasks and enable consistent call-to-action placement. Compatible with all button variants and appearances.

Import Method

;

Individual Package

Import directly from the presets package for optimal tree-shaking and smaller bundle sizes.

Recommended for component-specific usage

Global Library

Import from the main library package when using multiple components from AristoByte UI.

Recommended for component-specific usage

Basic Usage Example

Basic implementation of the component using default properties. Suitable for general-purpose interactions.

Disabled

Shows the Action Buttons preset where quick actions are disabled due to context (e.g., selection absent, operation pending, or insufficient permissions).

Preview

Guidelines

    Contextual Disabling

  • Disable actions that require a selection when nothing is selected to prevent no-op operations.

  • Disable shortcuts during modal or global blocking states to prevent unexpected behavior.

  • Disable actions while related async tasks (e.g., batch apply) are in-flight to maintain consistency.

  • Use disabled variant for deprecated actions that will be removed in future releases.

    Developer & UX Tips

  • Surface helper text or inline affordances to explain disabled state (e.g., 'Select at least one item').

  • Keep keyboard access predictable; do not remove focusability unless completely inert.

  • Provide a single API to toggle action availability to simplify state management.

  • Log user attempts on disabled actions for UX diagnostics to identify confusion hotspots.

Props Reference

Complete reference for all props available on ActionButtons component(s), including type definitions, default values, and usage examples.

  • ActionButtons

    • Core Props

      • children

        React.ReactNode | stringdefault: ''

Viewing Unit with ID action-buttons