Usage
import { TextButton, SvgSearch } from '@loomhq/lens'
<TextButton icon={<SvgSearch />}>Search</TextButton>
Sizes
<Arrange gap="xsmall">
<TextButton size="small" icon={<SvgAdd />}>Small</TextButton>
<TextButton icon={<SvgAdd />}>Medium</TextButton>
<TextButton size="large" icon={<SvgAdd />}>Large</TextButton>
</Arrange>
With icon
<Arrange gap="xsmall">
<TextButton icon={<SvgShare />}>Share</TextButton>
<TextButton icon={<SvgAdd />}>New Item</TextButton>
<TextButton icon={<SvgSearch />}>Search</TextButton>
</Arrange>
See the Icon set.
Icon position
<Arrange gap="xsmall">
<TextButton iconPosition="left" icon={<SvgArrowLeft />}>Left</TextButton>
<TextButton iconPosition="right" icon={<SvgArrowRight />}>Right</TextButton>
</Arrange>
Without icon
<Arrange gap="xsmall">
<TextButton>Open</TextButton>
<TextButton>Archive</TextButton>
<TextButton>Delete</TextButton>
</Arrange>
Offset
Use offsetSide
to offset the padding and align to a side.
<Arrange gap="medium" justifyContent="space-between">
<Container borderSide="left" borderColor="red" borderWidth="2px">
<Arrange gap="xsmall">
<TextButton offsetSide="left">Archive</TextButton>
<TextButton>Delete</TextButton>
</Arrange>
<Container maxWidth="40ch" paddingY="small">
{demoText.medium}
</Container>
<TextButton offsetSide="left" icon={<SvgFolder />}>Save</TextButton>
</Container>
<Container borderSide="right" borderColor="red" borderWidth="2px">
<Arrange gap="xsmall" justifyContent="end">
<TextButton>Archive</TextButton>
<TextButton offsetSide="right">Delete</TextButton>
</Arrange>
<Container maxWidth="40ch" paddingY="small">
<Text alignment="right">
{demoText.medium}
</Text>
</Container>
<Arrange justifyContent="end">
<TextButton offsetSide="right" icon={<SvgFolder />}>Save</TextButton>
</Arrange>
</Container>
</Arrange>
Active
<TextButton isActive icon={<SvgAdd />}>
New Item
</TextButton>
Disabled
<TextButton isDisabled icon={<SvgAdd />}>
New Item
</TextButton>
Forwarding refs
Use the ref
prop to access the DOM node.
() => {
const ref = useRef(null)
const onClick = () => ref.current.focus()
return (
<>
<Spacer bottom="small">
<TextButton ref={ref} icon={<SvgAdd />}>
New Item
</TextButton>
</Spacer>
<TextButton onClick={onClick}>Click to focus</TextButton>
</>
)
}
Props
size
'small' | 'medium' | 'large'
'medium'
iconPosition
'left' | 'right'
'left'
onClick
React.ReactEventHandler
children
React.ReactNode
required
offsetSide
'left' | 'right'