Usage
import { TextButton, SvgSearch } from '@loomhq/lens'
<TextButton icon={<SvgSearch />}>Search</TextButton>
Sizes
<Arrange gap="medium">
<TextButton icon={<SvgAdd />}>Medium</TextButton>
<TextButton size="small" icon={<SvgAdd />}>Small</TextButton>
</Arrange>
With icon
<Arrange gap="medium">
<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="medium">
<TextButton iconPosition="left" icon={<SvgArrowLeft />}>Left</TextButton>
<TextButton iconPosition="right" icon={<SvgArrowRight />}>Right</TextButton>
</Arrange>
Without icon
<Arrange gap="medium">
<TextButton>Open</TextButton>
<TextButton>Archive</TextButton>
<TextButton>Delete</TextButton>
</Arrange>
Disabled
<TextButton isDisabled icon={<SvgAdd />}>
New Item
</TextButton>
Props
size
oneOf: "small", "medium"
'medium'
iconPosition
oneOf: 'left', 'right'
'left'
htmlTag
oneOf: 'button', 'a'
'button'