JavaScript for WordPress › Forums › Gutenberg Development › Dashicons in custom toolbar control button › Reply To: Dashicons in custom toolbar control button
July 27, 2018 at 2:51 pm
#53360
Participant
I think I’ve actually just found what I was looking for through some Google-Fu, you’ll never guess where 😀
https://wp.zacgordon.com/2018/01/01/how-to-use-the-tooltip-component-in-gutenberg/
This is the code I ended up with (in this case it’s a quick toggle for a thick border around the element).
<Toolbar>
<Tooltip text={ __( 'Thick Border', 'jsforwpblocks' ) }>
<Button
className={ classnames(
'components-icon-button',
'components-toolbar__control',
{ 'is-active': thickBorder },
) }
onClick={ () => setAttributes( { thickBorder: ! thickBorder } ) }
>
<Dashicon icon="grid-view" />
</Button>
</Tooltip>
</Toolbar>
Thanks for the help, really impressed with the course!