README.md

ToolHeader

Header component for tool messages with icon, name, actions, and status indicators

Features

• Tool Icon Display: Shows custom tool icon
• Tool Name: Displays tool name with optional additional info
• Action Buttons: Supports multiple action buttons with icons
• Status Indicator: Displays status
• Custom Content: Supports additional content display

Usage

import {ToolHeader} from '@/components/molecules/ToolHeader';
import type {Action} from '@/types/common';
import {Icon} from '@gravity-ui/uikit';
import {CircleInfo, Copy, TrashBin} from '@gravity-ui/icons';

const actions: Action[] = [
  {label: 'Copy', onClick: () => console.log('Copied'), icon: <Icon data={Copy} size={16} />},
  {
    label: 'Delete',
    onClick: () => console.log('Deleted'),
    icon: <Icon data={TrashBin} size={16} />,
  },
];

<ToolHeader
  toolIcon={<Icon data={CircleInfo} size={20} />}
  toolName="My Tool"
  actions={actions}
  status="success"
/>;

Props

Prop	Type	Required	Default	Description
toolIcon	React.ReactNode	-	-	Icon to display next to tool name
toolName	string	✓	-	Name of the tool
content	React.ReactNode	-	-	Additional information to display
actions	Action[]	-	-	Array of action buttons to display
status	ToolStatus	-	-	Status indicator
className	string	-	-	Additional CSS class name
qa	string	-	-	Data QA attribute

Action

Prop	Type	Required	Description
label	string	-	Button label for tooltip
onClick	() => void	-	Handler for button click
icon	React.ReactNode	-	Icon to display in button
view	ButtonView	-	Button view style

ToolStatus

Type: 'success' | 'error' | 'loading'

Value	Description
success	Success status indicator
error	Error status indicator
loading	Loading status indicator

Styling

The component uses CSS variables for theming:

Variable	Description
--g-spacing-2	Gap between main sections and left-side items
--g-spacing-3	Gap between right-side action items