Usage
Add an image text alternative to convey this component’s purpose.
import { IconButton } from '@loomhq/lens/icons'
import { SvgFolder } from '@loomhq/lens/icons'
<IconButton altText="Move to Folder" icon={<SvgFolder />} />
HTML tag
Change the HTML wrapper tag with the htmlTag prop. The default tag is <button>. Use href when using htmlTag="a".
<Arrange gap="small">
<IconButton icon={<SvgArrowForward />} />
<IconButton htmlTag="a" href="#" icon={<SvgArrowForward />} />
</Arrange>
Sizes
<Arrange gap="medium">
<IconButton altText="Add Collaborator" size="small" icon={<SvgAdd />}/>
<IconButton altText="Add Collaborator" size="medium" icon={<SvgAdd />}/>
<IconButton altText="Add Collaborator" size="large" icon={<SvgAdd />}/>
</Arrange>
Icon
<Arrange gap="small">
<IconButton altText="Play" icon={<SvgPlay />} />
<IconButton altText="Add Collaborator" icon={<SvgAdd />} />
<IconButton altText="Back" icon={<SvgArrowBack />} />
</Arrange>
See the Icon set.
Active
<IconButton altText="Next" isActive icon={<SvgGrid />} />
Disabled
<IconButton altText="Next" isDisabled icon={<SvgArrowForward />} />
Color
Use one of the palette colors.
<IconButton altText="Close" icon={<SvgClose />} iconColor='red' />
Forwarding refs
Use the ref prop to access the DOM node.
() => {
const ref = useRef(null)
const onClick = () => ref.current.focus()
return (
<>
<Spacer bottom="small">
<IconButton ref={ref} altText="Add Collaborator" size="small" icon={<SvgAdd />}/>
</Spacer>
<TextButton onClick={onClick}>Click to focus</TextButton>
</>
)
}
Props
size
'small' | 'medium' | 'large'
'medium'
htmlTag
'button' | 'a'
'button'
onClick
React.MouseEventHandler<HTMLInputElement>