Taskbar

Taskbar builds the Windows 98 shell footer and exposes quick launch, dividers, notification area, and clock primitives.

Props

Export	Key props	Description
`Taskbar`	footer props	Root shell bar.
`TaskbarQuickLaunch`	`icons`, `defaultVisibleCount`, `visibleCount`, `onVisibleCountChange`, `iconStepWidth`	Resizable quick launch icon strip.
`TaskbarDivider`	div props	Raised separator.
`TaskbarNotificationArea`	div props	Inset tray container.
`TaskbarSystemClock`	span props	Client clock updated every second.

Examples

Shell taskbar

import { Button, Taskbar, TaskbarDivider, TaskbarNotificationArea, TaskbarQuickLaunch, TaskbarSystemClock } from '@murasaki/react98'
 
const iconSrc = 'data:image/gif;base64,R0lGODlhEAAQAPAAAP///wAAACH5BAAAAAAALAAAAAAQABAAAAIhjI+py+0Po5y02ouz3rz7D4biSJbmiaaqKq6H2mJLAQA7'
 
export function TaskbarBasicDemo(): React.ReactElement {
  return (
    <Taskbar className="w-[360px]">
      <Button className="h-6 px-2 font-bold">Start</Button>
      <TaskbarDivider />
      <TaskbarQuickLaunch
        icons={[
          { src: iconSrc, alt: 'Docs', title: 'Docs' },
          { src: iconSrc, alt: 'Paint', title: 'Paint' },
          { src: iconSrc, alt: 'Media', title: 'Media' },
        ]}
      />
      <div className="min-w-0 flex-1" />
      <TaskbarNotificationArea>
        <TaskbarSystemClock />
      </TaskbarNotificationArea>
    </Taskbar>
  )
}

ARIA

Taskbar renders a footer. Provide accessible names for custom task buttons and meaningful alt text for quick launch icons.

Keyboard

Taskbar primitives do not add global shell shortcuts. Keyboard behavior comes from the buttons, links, and menus you compose inside the taskbar.

SSR

TaskbarSystemClock is client-rendered and updates after mount. Use your own stable timestamp if exact server/client text is required.