Labels for icon buttons

// apps/docs/examples/ui/tooltip.tsx'use client';
import {useState} from 'react';import {CopyIcon, DownloadIcon, PrinterIcon} from 'lucide-react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  Tooltip,  TooltipContent,  TooltipProvider,  TooltipTrigger,} from '@workspace/active-ui/components/primitives/tooltip';
const ACTIONS = [  {label: 'Copy the statement', icon: CopyIcon},  {label: 'Download as PDF', icon: DownloadIcon},  {label: 'Print', icon: PrinterIcon},];
/** * A short label for an icon button, shown on pointer hover and on keyboard * focus. The tooltip repeats the button's accessible name for sighted * readers; it is not the name. One `TooltipProvider` makes the next tooltip * open at once while the pointer moves along a row of buttons. */export default function TooltipExample() {  const [last, setLast] = useState<string | null>(null);  return (    <div className="flex flex-col items-center gap-3">      <TooltipProvider>        <div className="flex gap-1" role="group" aria-label="Statement">          {ACTIONS.map(({label, icon: Icon}) => (            <Tooltip key={label}>              <TooltipTrigger                render={                  <Button                    variant="ghost"                    size="icon"                    aria-label={label}                    onClick={() => setLast(label)}                  />                }              >                <Icon aria-hidden />              </TooltipTrigger>              <TooltipContent side="bottom">{label}</TooltipContent>            </Tooltip>          ))}        </div>      </TooltipProvider>      <p className="text-muted-foreground text-sm" aria-live="polite">        {last ? `Chosen: ${last}` : 'Hover or focus a button.'}      </p>    </div>  );}