I'm very new to Svelte and I want to build a theme for a website. When I want buttons to have a certain look and animations, do I create a new Button component and use that every time with slots or do I just create a class for this button that has some css code and use the standard html button?
Of course I can do it both ways, but which one is preferred in svelte?
You could use this strategy for theming your application. You can use $$restProps to capture your classes and in your components, you can also set up the events for the buttons.
App.svelte
<script>
import Button from "./Button.svelte"
</script>
<Button class="primary">
My Button
</Button>
<Button class="danger">
My Button
</Button>
Button.svelte
<script>
let buttonProps = {
class:[$$restProps.class]
}
</script>
<button on:click
on:mouseover
on:mouseenter
on:mouseleave
{...buttonProps}>
<slot/>
</button>
<style>
.primary{
color:green;
}
.danger {
color:red;
}
</style>
Example REPL. Components are the right way to go for build large applications.