Svelte custom button component or style with css

Question

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?

Answer 1

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.