What can I do when types are missing for a component? (using Toast component)

[planetaska]

I wanted to customize the button color for the Toast component to make it look better. But when I tried to use the documented buttonAction prop, my editor told me I am missing types.

Here is the doc for Toast (see the props tab):
https://www.skeleton.dev/utilities/toasts

Here is the source for the types:
https://github.com/skeletonlabs/skeleton/blob/master/src/lib/utilities/Toast/types.ts

As you can see, buttonAction and many other props are not in there.

I guess there will be more missing types. Is there anything I can do to make it work temporarily, before the types can be added to the main branch?

[endigo9740]

Can you share the specific error?

When customizing a component via style props you don't provide types, you just provide a key and value (attribute and value) such as:

<Toast buttonAction="btn variant-filled-primary" />

edit

Reading your message again, I see what you mean - you're trying to customize it via the ToastSettings data.

Essentially you have two ways to customize toast specifically:

1. Using the prop method as demoed above - this will change the global defaults for all toast instances
2. Using the ToastSettings for one-off changes per toast instance (per message if you will)

We don't support you passing component props values within ToastSettings, however you can use classes to target the button:
https://github.com/skeletonlabs/skeleton/blob/master/src/lib/utilities/Toast/types.ts#L20

You'll want to use the Tailwind arbitrary selector syntax:
https://www.skeleton.dev/docs/styling#tailwinds-arbitrary-variants

The classes are applied to the parent element, here:
https://github.com/skeletonlabs/skeleton/blob/master/src/lib/utilities/Toast/Toast.svelte#L88

And you'll want to affect the button child element here:
https://github.com/skeletonlabs/skeleton/blob/master/src/lib/utilities/Toast/Toast.svelte#L98

So the syntax would be something like:

const toastSettings: ToastSettings = {
    // ...
    class: '[&>button]:!bg-green-500'
    // ...
}

(obviously the component prop is a lot simpler in this scenario!)

[planetaska]

Ah, I see! I confused the component props with the ToastSettings.

So if I wanted to change the button style globally (per the singleton pattern described in the docs), I should use the props for the component.

<Toast buttonAction="btn variant-filled-primary" />

And if I wanted to change the style for a single instance, I can use the class target on ToastSettings.

class: '[&>button]:!bg-green-500'

That is very helpful! Thank you for the quick reply. Skeleton is awesome!!

[endigo9740]

Yep you've got it, that's it!

And thanks for the kind words!

[Joul1285]

Hello, don't know if the source code for the toat changed, but I was able to manipulate the button with this tailwind syntax:

classes: '[&_button]:!bg-green-500',

The solution mentioned above was not working on my case.