Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

Playground

Layout recipes
Showcase

IconButton

Usage Guidelines

Usage

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

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

Sizes

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

<Arrange gap="medium">
  <IconButton altText="Add Collaborator" icon={<SvgAdd />}/>
  <IconButton altText="Add Collaborator" size="small" 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'

'medium'

altText

string

required

icon

React.ReactNode

onClick

React.ReactEventHandler

isActive

boolean

isDisabled

boolean