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>
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.
<Arrange 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>
</Arrange>
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>
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>
With loader
<Button hasLoader>
Button
</Button>
Full width
<>
<Button hasFullWidth>Full Width</Button>
<Spacer bottom="small" />
<Button hasFullWidth icon={<SvgAdd />}>Full Width</Button>
</>
Disabled
<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;
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.
<Arrange gap="small">
<Button>Rendering {'<button>'} tag</Button>
<Button htmlTag="a">Rendering {'<a>'} tag</Button>
</Arrange>
Props
size
'small' | 'medium' | 'large'
'medium'
variant
| 'neutral'
| 'primary'
| 'secondary'
| 'record'
| 'upgrade'
| 'danger'
| 'ai'
'neutral'
iconPosition
'left' | 'right'
'left'
htmlTag
'button' | 'a'
'button'
onClick
React.MouseEventHandler<HTMLButtonElement>
refHandler
(ref: HTMLButtonElement) => void