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.

With icon

See the Icon set.

For buttons with logo use the variant neutral.

With loader

Full width

Disabled

HTML tag

Change the HTML wrapper tag with htmlTag prop.

Rendering <a> tag

Props

name
type
default
size
'small' | 'medium' | 'large'
'medium'
variant
'neutral' | 'primary' | 'record' | 'upgrade' | 'danger'
'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