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 Illustration Link List Loader Logo LogoLoader Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Toast Tooltip
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

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 />} />

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' />

Props

name

type

default

iconColor

string

'body'

size

'small' | 'medium' | 'large'

'medium'

altText

string

required

icon

React.ReactNode

onClick

React.MouseEventHandler<HTMLInputElement>

backgroundColor

string

isActive

boolean

isDisabled

boolean

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Playground

IconButton

Usage

Sizes

Icon

Active

Disabled

Color

Props