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

Illustration

Usage

import { Illustration, SvgSmile } from '@loomhq/lens'
<Illustration illustration={<SvgSmile />} />

Illustration

See the Illustration set.

<Arrange gap="medium">
  <Illustration illustration={<IllustrationStarred />} />
  <Illustration illustration={<IllustrationShare />} />
  <Illustration illustration={<IllustrationInviteMembers />} />
</Arrange>

<Arrange gap="medium">
  <Illustration illustration={<IllustrationStarred />} />
  <Illustration illustration={<IllustrationShare />} />
  <Illustration illustration={<IllustrationInviteMembers />} />
</Arrange>

Color

Use one of the palette colors.

<Illustration color='body' illustration={<IllustrationShare />} />

<Illustration color='body' illustration={<IllustrationShare />} />

Size

The default size is 12×12 units (6rem × 6rem), To change it use the size prop, the value can be specified in units, pixels or any valid css unit.

<Arrange gap="medium">
  <Illustration illustration={<IllustrationPto />} />
  <Illustration size={9} illustration={<IllustrationPto />} />
  <Illustration size='3rem' illustration={<IllustrationPto />} />
</Arrange>

<Arrange gap="medium">
  <Illustration illustration={<IllustrationPto />} />
  <Illustration size={9} illustration={<IllustrationPto />} />
  <Illustration size='3rem' illustration={<IllustrationPto />} />
</Arrange>

With alternative text

If the illustration is not purely decorative, add an image text alternative for accessibility reasons.

<Illustration altText="Favorite" illustration={<IllustrationInvite />} />

<Illustration altText="Favorite" illustration={<IllustrationInvite />} />

Props

name

type

default

color

string

'orangeDark'

size

number | string

altText

string

illustration

React.ReactNode

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Playground

Illustration

Usage

Illustration

Color

Size

With alternative text

Props