IconButton component · Kition Tessera

Playground

Props

label

pressed

disabled

What is shown

import { IconButton } from '@kition/tessera-ui'
import { LayersIcon } from '@kition/tessera-icons/react'

<IconButton label="Layers" icon={LayersIcon} />

When to use

Toolbars, tool rails, panel headers.

When not to

An action whose icon is not obvious: use a Button with a label.

Examples

Toggles in a bar

icon-button.tsx

import { useState } from 'react'
import { IconButton } from '@kition/tessera-ui'
import { BoldIcon, ItalicIcon, UnderlineIcon } from '@kition/tessera-icons/react'

export default function Demo() {
  const [bold, setBold] = useState(true)
  return (
    <div className="demo-row">
      <IconButton icon={BoldIcon} label="Bold" pressed={bold} onClick={() => setBold(!bold)} />
      <IconButton icon={ItalicIcon} label="Italic" />
      <IconButton icon={UnderlineIcon} label="Underline" disabled />
    </div>
  )
}

Props

IconButton

Prop	Type	Default
`icon`required	`IconComponent`	—
`label`required	`string`	—
`pressed`	`boolean`	—

Also takes the attributes of its HTML element (`className`, `aria-*`, events…).

Used in

12 of Kition's 16 kits use this component.

Board
Cad
Cube
Design
Doc
Effect
Film
Pdf
Photo
Sheet
Slide
Vector