JavaScript for WordPress Forums Gutenberg Development Dashicons in custom toolbar control button Reply To: Dashicons in custom toolbar control button

#53360
jbr
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!