# Types
Every type **theui-svelte** exports, in alphabetical order, with what it is for and which components use it.
## Importing Types
The types live in a subpath of their own, so you can pull in the ones you need without touching the components.
**Typescript**
```ts
import type { ANIMATE_SPEED, ROUNDED } from "theui-svelte/type"
let speed: ANIMATE_SPEED = "fast"
let corner: ROUNDED = "lg"
```
You rarely have to name them: passing a string straight to a prop is checked against these unions anyway. They earn their keep when you keep settings in a variable, take props of your own that you pass on to a component, or write a function that returns one.
Types vanish when your app is built. They are there for your editor and for `svelte-check`, and cost nothing at runtime.
## Accordion Size
Padding of an accordion heading and its body. Set on `Accordion`, where every `AccordionItem` inside picks it up.
**Typescript**
```ts
type ACCORDION_SIZE = "compact" | "default" | "large"
```
## Animation Speed Type
How long a transition takes. Nearly every component that moves takes it as `animationSpeed`, and `"none"` turns the transition off, which is the value to reach for when an element should not animate at all.
**Typescript**
```ts
type ANIMATE_SPEED = "none" | "slower" | "slow" | "normal" | "fast" | "faster"
```
## Avatar Size Type
Diameter of an `Avatar`. An `AvatarGroup` takes it too and hands it to every avatar inside, so the stack stays even.
**Typescript**
```ts
type AVATAR_SIZE = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
```
## Avatar Status Type
The dot on an `Avatar`. Leave `status` unset for no dot at all.
**Typescript**
```ts
type AVATAR_STATUS = "online" | "offline" | "busy" | "away"
```
## Breadcrumb Data Type
One entry in the `data` array of a `Breadcrumb`. An entry without a `url` is rendered as plain text, which is what you want for the page you are already on.
**Typescript**
```ts
type BREADCRUMB_DATA = { text: string; url?: string }
```
## Button Size Type
Padding and text size of a `Button`, and of a `ButtonGroup` or `Pagination` that passes it down. `"auto"` drops the padding so the button takes the size of what you put inside it.
**Typescript**
```ts
type BUTTON_SIZE = "xs" | "sm" | "md" | "lg" | "xl" | "auto"
```
## Card Image Type
The `img` prop of a `Card`. Anything else you add to the object, such as `loading` or `width`, is passed to the `![]()
` element.
**Typescript**
```ts
type CARD_IMAGE_TYPE = {
class?: string
src?: string
alt?: string
[key: string]: unknown
}
```
## Combobox Item Type
What you put in the `items` array of a `Combobox`. A bare string or number is both the value and the text; an object splits the two and can disable an entry or file it under a group heading.
**Typescript**
```ts
type COMBOBOX_ITEM = string | number | {
value?: unknown
text?: string
disabled?: boolean
// Options with the same group name are shown together under its heading
group?: string
}
```
## Combobox Option Type
The same option once the component has filled in what you left out. This is the shape handed to the `option` snippet and to a `filter` function of your own, so every field is there to read.
**Typescript**
```ts
type COMBOBOX_OPTION = {
value: unknown
text: string
disabled: boolean
group?: string
}
```
## Core Type
The library wide defaults you pass to `setTheuiDefaults`. Every key is optional. `animationSpeed`, `shadow` and `reset` are fallbacks, so anything you set on a component, a [Form](https://www.theui.dev/docs/form) or a [Fieldset](https://www.theui.dev/docs/fieldset) beats them. `rounded` is an off switch instead: `false` squares off every component whatever its `rounded` prop says. See [Global defaults](https://www.theui.dev/docs/global-defaults).
**Typescript**
```ts
type CORE = {
rounded?: boolean
animationSpeed?: ANIMATE_SPEED
reset?: boolean
shadow?: SHADOW
}
```
## Divider Align Type
Where the label of a `Divider` sits along the line.
**Typescript**
```ts
type DIVIDER_ALIGN = "start" | "center" | "end"
```
## Divider Orientation Type
Which way a `Divider` runs. A vertical one needs a parent with a height, since it stretches to fill it.
**Typescript**
```ts
type DIVIDER_ORIENTATION = "horizontal" | "vertical"
```
## Divider Variant Type
The line style of a `Divider`.
**Typescript**
```ts
type DIVIDER_VARIANT = "solid" | "dashed" | "dotted"
```
## Dropdown Preload Type
When SvelteKit should start fetching the page behind a `DropdownItem` link: as the pointer arrives, as it is pressed, or not at all.
**Typescript**
```ts
type PRELOAD = false | "off" | "tap" | "hover"
```
## Dropzone Rejection Type
What `FileDropzone` hands to `onreject` for each file it turned away, with the reason it did. Remember that these checks run in the browser, so the server has to make them again.
**Typescript**
```ts
type DROPZONE_REJECTION = {
file: File
// Why the file was not accepted
reason: "type" | "size" | "count"
}
```
A rejection is a good moment to tell people what went wrong, rather than letting the file disappear without a word.
```svelte
files.forEach((f) => notify(`${f.file.name}: ${f.reason}`))}
/>
```
## Input Size Type
Height and text size of a form control. Set it on one field, or on the `Form` or `Fieldset` around a group of them, and every field inside follows.
**Typescript**
```ts
type INPUT_SIZE = "sm" | "md" | "lg" | "xl"
```
## Input Type
The `type` of an `Input`. `"textarea"` is in the list because the component renders a `