New Button web component

We’ve added a new <fun-button> web component to replace the <Button /> component from @funnel-io/react-widgets as that library is deprecated and React-only. There are a number of changes to be aware of when migrating to the new component.

Icon and label

The ‘icon’ and ‘label’ properties have been dropped. Instead add the icon and label as child elements. This gives the author much more flexibility to put whatever they like inside the button, like icons, images, anything.

That said there is an icon slot that should be used if the icon is before the label and the busy property is going to be used.

Sizes

The current buttons have four sizes: ‘x-small’, ‘small’, ‘medium’, ‘large’. We have almost never used ‘large’, and ‘small’ is the most common. The new button removes the ‘large’ style and resets the other sizes, so ‘x-small’ becomes ‘small’, ‘small’ becomes ‘medium’, and ‘medium’ becomes ‘large’.

The default size is now ‘medium’.

Variants

The new button supports four kinds of buttons, called ‘variants’:

• Primary
• Secondary (the default)
• Flat
• Danger

Tooltips

THe new button has built-in support for tooltips. To add a tooltip add child content in a tooltip slot:

Busy state

The new button has a busy property. Setting it to ‘true’ will disable the button and show a busy spinner.

Links

Adding an href attribute to a button will cause it to actually render a link, so users can right-click or command click or whatever else they can do with a link. You can also add the target attribute for when navigation should happen in the main frame.