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

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

See the Icon set.

One icon

<Arrange gap="small" columns="1fr">
  <Arrange gap="small">
    <Button iconBefore={<SvgRecord />} size="small">Small</Button>
    <Button iconAfter={<SvgRecord />} size="small">Small</Button>
  </Arrange>
  <Arrange gap="small">
    <Button iconBefore={<SvgRecord />}>Medium</Button>
    <Button iconAfter={<SvgRecord />}>Medium</Button>
  </Arrange>
  <Arrange gap="small">
    <Button iconBefore={<SvgRecord />} size="large">Large</Button>
    <Button iconAfter={<SvgRecord />} size="large">Large</Button>
  </Arrange>
</Arrange>

<Arrange gap="small" columns="1fr">
  <Arrange gap="small">
    <Button iconBefore={<SvgRecord />} size="small">Small</Button>
    <Button iconAfter={<SvgRecord />} size="small">Small</Button>
  </Arrange>
  <Arrange gap="small">
    <Button iconBefore={<SvgRecord />}>Medium</Button>
    <Button iconAfter={<SvgRecord />}>Medium</Button>
  </Arrange>
  <Arrange gap="small">
    <Button iconBefore={<SvgRecord />} size="large">Large</Button>
    <Button iconAfter={<SvgRecord />} size="large">Large</Button>
  </Arrange>
</Arrange>

Two icons

When using two icons, reserve iconAfter for icons that provide a clear affordance for the user when selecting on the button. Arrows and chevrons are best reserved for iconAfter.

<Arrange gap="medium" rows={['auto']} justifyItems="start">
    <Button variant="primary" iconBefore={<SvgConfluenceNeutral />} iconAfter={<SvgExternalLink />} size="small">Open in Confluence</Button>
    <Button iconBefore={<SvgWaveform />} iconAfter={<SvgCollapseReplies />}>Hide Waveform</Button>
    <Button variant="record" iconBefore={<SvgRecord />} iconAfter={<SvgArrowRight />} size="large">Record and save</Button>

</Arrange>

<Arrange gap="medium" rows={['auto']} justifyItems="start">
    <Button variant="primary" iconBefore={<SvgConfluenceNeutral />} iconAfter={<SvgExternalLink />} size="small">Open in Confluence</Button>
    <Button iconBefore={<SvgWaveform />} iconAfter={<SvgCollapseReplies />}>Hide Waveform</Button>
    <Button variant="record" iconBefore={<SvgRecord />} iconAfter={<SvgArrowRight />} size="large">Record and save</Button>

</Arrange>

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>

Floating

For buttons floating over content, use isFloating. For the neutral variant, it uses solid backgrounds

<Arrange gap="small">
  <Button isFloating>
  Jump to Latest
</Button>
<Button variant="primary" isFloating>
  Jump to Latest
</Button>
</Arrange>

<Arrange gap="small">
  <Button isFloating>
  Jump to Latest
</Button>
<Button variant="primary" isFloating>
  Jump to Latest
</Button>
</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>

Aria disabled

For buttons whose disabled state is relevant to assistive technologies such as screen readers, use the ariaDisabled prop. The ariaDisabled prop will only be applied when the disabled prop is true.

By default, ariaDisabled is unset, excluding disabled buttons from the DOM. Users relying on assistive technologies will not be notified of the button's existence.

The ariaDisabled prop should be set to true when the disabled semantics should be conveyed. Best practice is to use ariaDisabled when a button is disabled in a field due to missing entries or when an upgrade is needed to access a feature.

<Tooltip content='Upgrade to premium to access this feature' tabIndex={-1}>
  <Button isDisabled ariaDisabled>
    Premium button
  </Button>
</Tooltip>

<Tooltip content='Upgrade to premium to access this feature' tabIndex={-1}>
  <Button isDisabled ariaDisabled>
    Premium button
  </Button>
</Tooltip>

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

ariaDisabled

boolean

hasFullWidth

boolean

icon

React.ReactNode

iconBefore

React.ReactNode

iconAfter

React.ReactNode

logoSrc

string

onClick

React.MouseEventHandler<HTMLButtonElement>

hasLoader

boolean

isFloating

boolean

href

string

download

string

target

string

type

string

refHandler

(ref: HTMLButtonElement) => void

interactionName

string

className

string

style

any

Guides

Styles

Components

Loaders

Layout

Icons

Illustrations

Patterns

Utilities

Playground

Button

Usage

Sizes

Variants

With icon

One icon

Two icons

With logo

Floating

With loader

Full width

Disabled

Aria disabled

RefHandler

HTML tag

UFO Press Tracing

Props