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

prop
type
default
size
oneOf: "small", "medium", "large"
'medium'
variant
oneOf: "neutral", "primary", "record", "upgrade", "danger"
'neutral'
htmlTag
oneOf: 'button', 'a'
'button'
iconPosition
oneOf: 'left', 'right'
'left'
children
node
onClick
func
isDisabled
bool
hasFullWidth
bool
icon
node
logoSrc
string
hasLoader
bool