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.

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.

With icon

See the Icon set.

For buttons with logo use the variant neutral.

With loader

Full width

Disabled

RefHandler

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

HTML tag

Change the HTML wrapper tag with htmlTag prop.

Props

name
type
default
size
'small' | 'medium' | 'large'
'medium'
variant
'neutral' | 'primary' | 'record' | 'upgrade' | 'danger' | 'ai'
'neutral'
iconPosition
'left' | 'right'
'left'
htmlTag
'button' | 'a'
'button'
children
React.ReactNode
isDisabled
boolean
hasFullWidth
boolean
icon
React.ReactNode
logoSrc
string
hasLoader
boolean
href
string
target
string
refHandler
(ref: HTMLButtonElement) => void