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 Typeahead 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

Button

Usage

import { Button } from '@loomhq/lens'
<Button>Button</Button>

Sizes

medium is the default size and should cover most of the cases.
Use large size in special cases to highlight the button.
Use small in tight spaces.

<Arrange gap="small">
  <Button variant="neutral" size="small">
    Button
  </Button>
  <Button variant="neutral">Button</Button>
  <Button variant="neutral" size="large">
    Button
  </Button>
</Arrange>

<Arrange gap="small">
  <Button variant="neutral" size="small">
    Button
  </Button>
  <Button variant="neutral">Button</Button>
  <Button variant="neutral" size="large">
    Button
  </Button>
</Arrange>

Variants

neutral is the default variant and should cover most of the cases.
Use the primary variant to highlight the most important action.
Use the record variant to indicate a recording action.
Use the upgrade variant to indicate a plan upgrade action.
Use the danger variant to indicate a destructive action.
Use the ai variant for actions related to Loom AI.

<Split gap="small">
  <Button variant="neutral">Neutral</Button>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="record">Record</Button>
  <Button variant="upgrade">Upgrade</Button>
  <Button variant="danger">Danger</Button>
  <Button variant="ai">Loom AI</Button>
</Split>

<Split gap="small">
  <Button variant="neutral">Neutral</Button>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="record">Record</Button>
  <Button variant="upgrade">Upgrade</Button>
  <Button variant="danger">Danger</Button>
  <Button variant="ai">Loom AI</Button>
</Split>

With icon

<Arrange gap="small" columns="1fr">
  <Arrange gap="small">
    <Button icon={<SvgRecord />} size="small">Small</Button>
    <Button icon={<SvgRecord />} iconPosition='right' size="small">Small</Button>
  </Arrange>
  <Arrange gap="small">
    <Button icon={<SvgRecord />}>Medium</Button>
    <Button icon={<SvgRecord />} iconPosition='right'>Medium</Button>
  </Arrange>
  <Arrange gap="small">
    <Button icon={<SvgRecord />} size="large">Large</Button>
    <Button icon={<SvgRecord />} size="large" iconPosition='right'>Large</Button>
  </Arrange>
</Arrange>

<Arrange gap="small" columns="1fr">
  <Arrange gap="small">
    <Button icon={<SvgRecord />} size="small">Small</Button>
    <Button icon={<SvgRecord />} iconPosition='right' size="small">Small</Button>
  </Arrange>
  <Arrange gap="small">
    <Button icon={<SvgRecord />}>Medium</Button>
    <Button icon={<SvgRecord />} iconPosition='right'>Medium</Button>
  </Arrange>
  <Arrange gap="small">
    <Button icon={<SvgRecord />} size="large">Large</Button>
    <Button icon={<SvgRecord />} size="large" iconPosition='right'>Large</Button>
  </Arrange>
</Arrange>

See the Icon set.

With logo

For buttons with logo use the variant neutral.

<Arrange gap="small">
  <Button logoSrc={exampleLogo.src}>
    Button
  </Button>
  <Button logoSrc={exampleLogo.src}/>
</Arrange>

<Arrange gap="small">
  <Button logoSrc={exampleLogo.src}>
    Button
  </Button>
  <Button logoSrc={exampleLogo.src}/>
</Arrange>

With loader

<Button hasLoader>
  Button
</Button>

<Button hasLoader>
  Button
</Button>

Full width

<>
  <Button hasFullWidth>Full Width</Button>
  <Spacer bottom="small" />
  <Button hasFullWidth icon={<SvgAdd />}>Full Width</Button>
</>

<>
  <Button hasFullWidth>Full Width</Button>
  <Spacer bottom="small" />
  <Button hasFullWidth icon={<SvgAdd />}>Full Width</Button>
</>

Disabled

<Button isDisabled>
  Can't touch this
</Button>

<Button isDisabled>
  Can't touch this
</Button>

RefHandler

Use the refHandler prop to pass down a function that creates/sets your ref from Button's parent component.

() => {
  const ref = useRef();

  const refHandler = (newRef) => {
    ref.current = newRef;

    // You can check console outputs
    console.log("Assigned ref to button", { newRef });
  }

  return (
    <>
      <Button refHandler={refHandler}>
        A button with ref value
      </Button>
    </>
  )
}

() => {
  const ref = useRef();

  const refHandler = (newRef) => {
    ref.current = newRef;

    // You can check console outputs
    console.log("Assigned ref to button", { newRef });
  }

  return (
    <>
      <Button refHandler={refHandler}>
        A button with ref value
      </Button>
    </>
  )
}

HTML tag

Change the HTML wrapper tag with htmlTag prop. Use the download prop to indicate that the linked resource is intended to be downloaded rather than displayed in the browser. For download links, best practice is to specify the title, type and size of the file explicitly or in aria-label.

<Arrange gap="small">
  <Button>Rendering {'<button>'} tag</Button>
  <Button htmlTag="a">Rendering {'<a>'} tag</Button>
  <Button htmlTag="a" download="thumbnail.png" aria-label="Download thumbnail (PNG, 200kb)">Download thumbnail</Button>
</Arrange>

<Arrange gap="small">
  <Button>Rendering {'<button>'} tag</Button>
  <Button htmlTag="a">Rendering {'<a>'} tag</Button>
  <Button htmlTag="a" download="thumbnail.png" aria-label="Download thumbnail (PNG, 200kb)">Download thumbnail</Button>
</Arrange>

UFO Press Tracing

Like the Atlaskit Button component, if you use the interactionName prop, then the button will start tracing a press event within UFO when it is clicked. More about press tracing

<Button interactionName={"press-tracing-button"}>
  I'm using Press Tracing!
</Button>

<Button interactionName={"press-tracing-button"}>
  I'm using Press Tracing!
</Button>

Props

name

type

default

size

'small' | 'medium' | 'large'

'medium'

variant

'neutral'

iconPosition

'left' | 'right'

'left'

htmlTag

'button' | 'a'

'button'

children

React.ReactNode

isDisabled

boolean

hasFullWidth

boolean

icon

React.ReactNode

logoSrc

string

onClick

React.MouseEventHandler<HTMLButtonElement>

hasLoader

boolean

href

string

download

string

target

string

type

string

refHandler

(ref: HTMLButtonElement) => void

interactionName

string

className

string

style

any

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Playground

Button

Usage

Sizes

Variants

With icon

With logo

With loader

Full width

Disabled

RefHandler

HTML tag

UFO Press Tracing

Props