Koala Design

Act & navigate

• Button
• Link
• Menu item
• Action tile
• Reference
• Breadcrumbs
• Destructive actions
• Row actions
• Tabs
• Analytics
• Sidebar toggle
• Dark mode toggle

Contain & overlay

• Card
• Modal & drawer
• Dropdown & popover
• Panel
• Attention card
• Confirm modal
• Panel dock
• Review card header
• Tooltip
• Tray header

Display

• Badge
• Avatar
• Icon
• Metric
• Text & value atoms
• Messages
• Table
• Address line
• Quoted text
• Person
• Local time
• Message input
• Page title
• Section heading
• List
• Chart legend
• Table row
• Badge count
• Progress
• You
• Sparkline
• Note
• Review list
• Brand logo
• Google rating
• Falling leaves
• Attribution

Feedback

• Alert
• Empty state
• Spinner
• Skeleton
• Confetti
• Thinking
• Notification

Progress

• Stepper
• Stepper chain
• Step rail
• Task steps

Select & input

• Choice
• Checkbox
• Radio
• Toggle
• Field & input
• Select
• Search
• Date picker
• File upload
• Ai field action
• Radio yes no
• Rocker
• Settings toggle row
• Selected value
• Chip picker

• Detail page
• Form
• List
• Composition gallery
• Settings
• Activity timeline
• Avatar picker
• Dialpad
• Fact list
• Form errors
• Rich text editor
• Settings row
• Summary filter
• Summary headline
• Context switcher
• User menu
• Mega search
• Address finder
• Company finder