---
title: CSS
---

<script>
  import { Button } from 'slender-ui'
</script>

We use CSS variables.

<!-- prettier-ignore -->
```svelte
<Button label="Ain't nobody" />

<style>
  :root {
    --slender-color-neutral: 126, 34, 206; /* Global defaults are defined as RGB triples */
    --slender-border-radius: 2px;
  }
</style>
```

<Button class="mt-4" label="Ain't nobody" style="--slender-color-neutral: 126, 34, 206;--slender-border-radius: 2px;" />

#### Getting specific

Each component uses `slender-` + its lowercase name as a class that you can target directly (e.g. the `<Button />` will have a `.slender-button` class), but we recommend using custom properties ('CSS variables') instead:

<!-- prettier-ignore -->
```svelte
<Button label="Ain't nobody" />

<style>
  :root {
    --slender-button-primary-bg-color: 190, 18, 60;
    --slender-button-primary-color: 255, 255, 255;
    --slender-button-border-radius: 9001px;
    --slender-button-md-padding-horizontal: 5rem;
  }
</style>
```

<Button class="mt-4" style="--slender-button-primary-bg-color: 190, 18, 60; --slender-button-primary-color: 255, 255, 255; --slender-border-radius: 100px; --slender-button-md-padding-horizontal: 5rem;" label="Ain't nobody" />

Variable names follow a `--slender-{component}-{?type}-{property}` format, such as `--slender-button-background-color`.

You can find the full list of CSS variables here.