@tcn/ui-actions

A comprehensive collection of interactive UI components including buttons, button groups, and selection controls designed for modern web applications.

Overview

@tcn/ui-actions provides a set of high-quality, accessible action components that form the foundation for user interactions in your application. These components are built with accessibility in mind and integrate seamlessly with the Blackcat UI design system.

What's Included

Button Components

• Button: Standard button component with multiple hierarchies and sizes
• BaseButton: Foundation button component with full customization options
• SlimButton: Compact button variant for space-constrained layouts
• ButtonGroup: Container for grouping related buttons with consistent styling
• SelectGroup: Interactive button group for single or multiple selections

Selection Controls

• SingleSelectGroup: Radio-style selection with visual feedback
• SelectGroup: Multi-selection capability with toggle states

Interactive Features

• Hierarchy System: Primary, secondary, and tertiary button styles
• Size Variants: Multiple size options (xs, sm, md, lg, xl)
• State Management: Built-in support for disabled, loading, and active states
• Touch Support: Optimized for mobile and touch devices

Key Features

• Accessibility First: Built with ARIA attributes and keyboard navigation
• Design System Integration: Seamlessly works with Blackcat UI themes and spacing
• TypeScript Support: Full type safety with excellent IntelliSense
• Responsive Design: Adapts to different screen sizes and densities
• Customizable: Extensive styling and behavior customization options
• Performance Optimized: Efficient rendering with minimal re-renders

Usage

Basic Button

import { Button } from '@tcn/ui-actions';

function MyComponent() {
  return (
    <Button
      hierarchy="primary"
      size="medium"
      onClick={() => console.log('Button clicked')}
    >
      Click Me
    </Button>
  );
}

Button Groups

import { ButtonGroup, Button } from '@tcn/ui-actions';

function ActionGroup() {
  return (
    <ButtonGroup hierarchy="secondary" size="medium">
      <Button>Save</Button>
      <Button>Cancel</Button>
      <Button>Delete</Button>
    </ButtonGroup>
  );
}

Selection Controls

import { SingleSelectGroup, Button } from '@tcn/ui-actions';

function FilterControls() {
  const [selectedFilter, setSelectedFilter] = useState('all');

  return (
    <SingleSelectGroup
      value={selectedFilter}
      onChange={setSelectedFilter}
    >
      <Button value="all">All</Button>
      <Button value="active">Active</Button>
      <Button value="completed">Completed</Button>
    </SingleSelectGroup>
  );
}

Custom Styling

import { Button } from '@tcn/ui-actions';

<Button
  hierarchy="primary"
  size="large"
  style={{
    '--button-text-color': '#ffffff',
    '--button-background-color': '#ff6b6b'
  }}
  className="custom-button"
>
  Custom Styled Button
</Button>

Component Hierarchy

BaseButton

The foundation component that provides:

• Core button functionality and accessibility
• Touch event handling and context menu support
• Custom color and styling support
• Integration with layout components

Button

Standard button component that:

• Extends BaseButton with enhanced styling
• Provides consistent visual hierarchy
• Handles text and complex children
• Integrates with design system tokens

ButtonGroup

Container component that:

• Groups related buttons together
• Maintains consistent spacing and styling
• Provides visual separation between buttons
• Supports different hierarchies and sizes

Design System Integration

All components automatically integrate with:

• Spacing Scale: Consistent margins, padding, and gaps
• Color System: Primary, secondary, and accent color schemes
• Typography: Font sizes and weights that match your design
• Scalar Support: Automatic scaling for different screen densities

Accessibility Features

• Keyboard Navigation: Full keyboard support for all interactions
• ARIA Attributes: Proper labeling and state management
• Focus Management: Clear focus indicators and focus trapping
• Screen Reader Support: Semantic markup and descriptions
• Touch Optimization: Proper touch event handling for mobile devices

When to Use

Choose @tcn/ui-actions when you need:

• Interactive buttons and controls for your application
• Consistent button styling across your UI
• Accessible action components
• Button grouping and selection functionality
• Components that integrate with your design system

Customization

Components support extensive customization through:

• CSS Custom Properties: Dynamic color and styling changes
• CSS Modules: Scoped styling with design system integration
• Props Interface: Flexible configuration through component props
• Theme Integration: Automatic adaptation to different themes

Performance

• Efficient Rendering: Minimal re-renders and optimized updates
• Bundle Optimization: Tree-shakeable components for smaller bundles
• Memory Management: Proper cleanup and event handling
• Lazy Loading: Support for on-demand component loading

License

Apache-2.0