Usage
import { TextButton, SvgSearch } from '@loomhq/lens'
<TextButton icon={<SvgSearch />}>Search</TextButton>
Sizes
<Arrange gap="xsmall">
<TextButton icon={<SvgAdd />}>Medium</TextButton>
<TextButton size="small" icon={<SvgAdd />}>Small</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.
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
<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>
Disabled
<TextButton isDisabled icon={<SvgAdd />}>
New Item
</TextButton>
Props
size
'small' | 'medium'
'medium'
iconPosition
'left' | 'right'
'left'
onClick
React.ReactEventHandler
children
React.ReactNode
required
offsetSide
'left' | 'right'