Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton IconTile Illustration Indicator Link List Logo Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Typeahead Toast Tooltip
Loaders
Loader LogoLoader EllipsesLoader WaveformLoader
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

IconButton (deprecated)

Deprecated

This component is deprecated. Please use IconButton from @atlaskit/button/new

Usage

Add an image text alternative to convey this component’s purpose.

import { IconButton } from '@loomhq/lens/icons'
import { SvgFolder } from '@loomhq/lens/icons'
<IconButton altText="Move to Folder" icon={<SvgFolder />} />

HTML tag

Change the HTML wrapper tag with the htmlTag prop. The default tag is <button>. Use href when using htmlTag="a".

<Arrange gap="small">
  <IconButton icon={<SvgArrowForward />} />
  <IconButton htmlTag="a" href="#" icon={<SvgArrowForward />} />
</Arrange>

<Arrange gap="small">
  <IconButton icon={<SvgArrowForward />} />
  <IconButton htmlTag="a" href="#" icon={<SvgArrowForward />} />
</Arrange>

Sizes

<Arrange gap="medium">
  <IconButton altText="Add Collaborator" size="small" icon={<SvgAdd />}/>
  <IconButton altText="Add Collaborator" size="medium" icon={<SvgAdd />}/>
  <IconButton altText="Add Collaborator" size="large" icon={<SvgAdd />}/>
</Arrange>

<Arrange gap="medium">
  <IconButton altText="Add Collaborator" size="small" icon={<SvgAdd />}/>
  <IconButton altText="Add Collaborator" size="medium" icon={<SvgAdd />}/>
  <IconButton altText="Add Collaborator" size="large" icon={<SvgAdd />}/>
</Arrange>

Icon

<Arrange gap="small">
  <IconButton altText="Play" icon={<SvgPlay />} />
  <IconButton altText="Add Collaborator" icon={<SvgAdd />} />
  <IconButton altText="Back" icon={<SvgArrowBack />} />
</Arrange>

<Arrange gap="small">
  <IconButton altText="Play" icon={<SvgPlay />} />
  <IconButton altText="Add Collaborator" icon={<SvgAdd />} />
  <IconButton altText="Back" icon={<SvgArrowBack />} />
</Arrange>

See the Icon set.

Active

<IconButton altText="Next" isActive icon={<SvgGrid />} />

<IconButton altText="Next" isActive icon={<SvgGrid />} />

Disabled

<IconButton altText="Next" isDisabled icon={<SvgArrowForward />} />

<IconButton altText="Next" isDisabled icon={<SvgArrowForward />} />

Color

Use one of the palette colors.

<IconButton altText="Close" icon={<SvgClose />} iconColor='red' />

<IconButton altText="Close" icon={<SvgClose />} iconColor='red' />

Forwarding refs

Use the ref prop to access the DOM node.

() => {
  const ref = useRef(null)
  const onClick = () => ref.current.focus()
  return (
    <>
      <Spacer bottom="small">
        <IconButton ref={ref} altText="Add Collaborator" size="small" icon={<SvgAdd />}/>
      </Spacer>
      <TextButton onClick={onClick}>Click to focus</TextButton>
    </>
  )
}

() => {
  const ref = useRef(null)
  const onClick = () => ref.current.focus()
  return (
    <>
      <Spacer bottom="small">
        <IconButton ref={ref} altText="Add Collaborator" size="small" icon={<SvgAdd />}/>
      </Spacer>
      <TextButton onClick={onClick}>Click to focus</TextButton>
    </>
  )
}

Props

name

type

default

iconColor

string

'body'

size

'small' | 'medium' | 'large'

'medium'

htmlTag

'button' | 'a'

'button'

altText

string

required

icon

React.ReactNode

onClick

React.MouseEventHandler<HTMLInputElement>

backgroundColor

string

isActive

boolean

isDisabled

boolean

href

string

target

string

Guides

Styles

Components

Loaders

Layout

Icons

Illustrations

Patterns

Utilities

Playground

IconButton (deprecated)

Deprecated

Usage

HTML tag

Sizes

Icon

Active

Disabled

Color

Forwarding refs

Props