Icon button · Orbex Sonar-DB Design System

Examples

Variants and sizes

Code

tsx

import { IconButton } from '@orbex/sonar-components/icon-button'
import type { ComponentProps } from 'react'
import addSymbol from '@material-symbols/svg-400/rounded/add.svg?raw'
import editSymbol from '@material-symbols/svg-400/rounded/edit.svg?raw'
import filterSymbol from '@material-symbols/svg-400/rounded/filter_list.svg?raw'
import moreSymbol from '@material-symbols/svg-400/rounded/more_vert.svg?raw'
import notificationsSymbol from '@material-symbols/svg-400/rounded/notifications.svg?raw'
import searchSymbol from '@material-symbols/svg-400/rounded/search.svg?raw'

/* Material Symbols Rounded, weight 400, as icon components (Foundations › Icons) */
const symbol = (svg: string) => {
  const path = svg.match(/ d="([^"]+)"/)?.[1]
  return (props: ComponentProps<'svg'>) => (
    <svg viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" {...props}>
      <path d={path} />
    </svg>
  )
}

const AddIcon = symbol(addSymbol)
const EditIcon = symbol(editSymbol)
const FilterIcon = symbol(filterSymbol)
const MoreIcon = symbol(moreSymbol)
const NotificationsIcon = symbol(notificationsSymbol)
const SearchIcon = symbol(searchSymbol)

export default function Variants() {
  return (
    <>
      <IconButton label="Notifications" icon={<NotificationsIcon />} />
      <IconButton label="Search" icon={<SearchIcon />} variant="outlined" />
      <IconButton label="Edit layout" icon={<EditIcon />} variant="tonal" />
      <IconButton label="New order" icon={<AddIcon />} variant="filled" />
      <IconButton label="Filter" icon={<FilterIcon />} size="small" />
      <IconButton label="More actions" icon={<MoreIcon />} size="small" variant="tonal" />
    </>
  )
}

Sizes, variants and states

Variants, states and sizes

Usage

Standard in bars and on cards; the other weights follow Button.
Give it a Tooltip with the same words as its label, so sighted people can learn it too.
When an icon could mean several things, use a Button with a label instead.

Do and don’t

DoIcon buttons for familiar actions in toolbars and card headers, standard by default.

Don’tA row of filled icon buttons: every one shouts, and none is the main action.

DoA rare or abstract action gets words: a button with a label says what it does.

Don’tAn icon nobody can guess, even with a tooltip to read first.

Accessibility

Keyboard

Key	What it does
Tab	Moves focus to the control, and on.
Enter or Space	Activates it.

Roles and attributes

Element or attribute	What it gives
`aria-label`	From the required label prop: the button’s name, since it shows no text.
Icon	aria-hidden.

Notes

label is required and becomes the button’s accessible name.
The icon is hidden from assistive technology.
On touch screens the hit area grows to 48 px.

Use it

Each component is its own entry point with its own stylesheet, so an app loads only what it uses. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { IconButton } from '@orbex/sonar-components/icon-button'
import '@orbex/sonar-components/icon-button.css'

API

Props of IconButton
Prop	Type	Default
`label` Required What the button does, read by assistive technology. Pair the button with a Tooltip to show it on hover.	`string`	—
`icon` Required The icon. Decorative: the label names the action.	`ReactNode`	—
`variant` Standard sits on any surface with no fill; the others follow the weights of Button.	`'standard' \| 'filled' \| 'tonal' \| 'outlined'`	`'standard'`
`size` Medium is a 40 px button; small is 32 px, for card headers and dense rows. Both keep a 48 px touch target.	`'small' \| 'medium'`	`'medium'`

Also takes every attribute of the native <button> , except children, and a ref to it.