Button set the color to teal

[rhscjohn-dev]

I do not have a problem setting a button to one of the theme colors(primary, secondary, success, etc.).

I cannot seem to be able to set a button color to any other color, like teal. The color teal is assigned to a CSS var of --bs-teal: #20c997;.

buttons.svelte

<script>
  import { Button } from "sveltestrap";
</script>

<svelete:head>
  <title> Buttons </title>
</svelete:head>
<!-- simple button color primary-->
<div>
  <Button color="primary">Simple Button</Button>
</div>
<!-- simple button color teal-->
<div>
  <Button color="teal">Simple Button</Button>
</div>
<div>
  <Button color="var(--bs-teal)">Simple Button</Button>
</div>

Are we just limited to using the theme colors(primary, secondary, success, danger, warning, info, light and dark)?

[rhscjohn-dev]

Here is how you do it.

<!-- simple button color teal-->
<div>
  <Button color="primary" style="background-color: var(--bs-teal)"
    >Simple Teal Button</Button
  >
</div>