# Stacks Svelte

Stacks Svelte Components Documentation

> Generated Storybook documentation optimized for LLM consumption.

---

## Table of Contents

1. [Getting Started/Overview](#getting-started-overview)
2. [Components/ActivityIndicator](#components-activityindicator)
3. [Components/Avatar](#components-avatar)
4. [Components/Badge](#components-badge)
5. [Components/Bling](#components-bling)
6. [Components/Button](#components-button)
7. [Components/Checkbox](#components-checkbox)
8. [Components/EmptyState](#components-emptystate)
9. [Components/ExpandingInput](#components-expandinginput)
10. [Components/Icon](#components-icon)
11. [Components/Link](#components-link)
12. [Components/Loader](#components-loader)
13. [Components/Menu](#components-menu)
14. [Components/Modal](#components-modal)
15. [Components/Navigation](#components-navigation)
16. [Components/Notice](#components-notice)
17. [Components/PaginationController](#components-paginationcontroller)
18. [Components/Popover](#components-popover)
19. [Components/PostSummary](#components-postsummary)
20. [Components/RadioGroup](#components-radiogroup)
21. [Components/Select](#components-select)
22. [Components/Tag](#components-tag)
23. [Components/TextArea](#components-textarea)
24. [Components/TextInput](#components-textinput)
25. [Components/Toast](#components-toast)
26. [Components/UserCard](#components-usercard)
27. [Components/Vote](#components-vote)

---

## Getting Started/Overview

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/getting-started-overview--docs](https://svelte.stackoverflow.design/?path=/docs/getting-started-overview--docs)

---

## Components/ActivityIndicator

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-activityindicator--docs](https://svelte.stackoverflow.design/?path=/docs/components-activityindicator--docs)

### Usage Examples

**Base:**

```svelte
<ActivityIndicator
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
/>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | Screen reader text for accessibility |
| `variant` | `Variant` | Color variant of the indicator |
| `size` | `Size` | Size variant of the indicator |
| `content` | `string \| number` | Optional simple text/number content for the indicator (e.g., "3", "new") Note: content is ignored when size is "sm" |
| `class` | `ClassValue` | Additional CSS classes added to the element |

### Story Variations (5)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-activityindicator--base)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-activityindicator--variants)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-activityindicator--sizes)
- **Content types**: [View](https://svelte.stackoverflow.design/?path=/story/components-activityindicator--content-types)
- **With Custom Classes**: [View](https://svelte.stackoverflow.design/?path=/story/components-activityindicator--with-custom-classes)

---

## Components/Avatar

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-avatar--docs](https://svelte.stackoverflow.design/?path=/docs/components-avatar--docs)

### Usage Examples

**Base:**

```svelte
<Avatar
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
/>
```

**As a link:**

```svelte
<Avatar name="href example" href="#" src="https://picsum.photos/64" size={64} />
```

**Letter:**

```svelte
<Avatar name="letter example" class="bg-theme-primary-400" letter="S" size={64} />
```

**Badge:**

```svelte
<Avatar name="badge example" badge src="https://picsum.photos/64" size={64} />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `name` | `string` | Account name for screen readers |
| `size` | `Size` | The size of the avatar in pixels |
| `href` | `string` | Render the tag as a link with the given href |
| `src` | `string` | The avatar image source |
| `letter` | `string` | Single character to display as the avatar |
| `status` | `"online"` | User status |
| `badge` | `boolean` | Boolean to show the shield badge on the avatar |
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `i18nPrivateIconTitle` | `string` | Localized translation for private communities icon title tag |

### Story Variations (6)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--base)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--sizes)
- **As a link**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--as-a-link)
- **Letter**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--letter)
- **Badge**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--badge)
- **Status**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--status)

---

## Components/Badge

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-badge--docs](https://svelte.stackoverflow.design/?path=/docs/components-badge--docs)

### Usage Examples

**Base:**

```svelte
<Badge
    text={text ?? "1.23k"}
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
/>
```

**General:**

```svelte
<Badge type="general" text="general" />
```

**Reputation:**

```svelte
<Badge type="reputation" text="99 rep" />
```

**Activity:**

```svelte
<Badge type="activity" text="new message" label="Activity badge" />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `text` | `string` | The text content of the badge |
| `label` | `string` | Text to convey the badge's purpose to assistive technologies |
| `type` | `BadgeType` | The type of badge |
| `size` | `BadgeSize` | The size of the badge |
| `icon` | `string` | The svg icon to display within the badge (generally provided as a reference to our icon package) |
| `squared` | `boolean` | Whether to use squared variant (only relevant if an icon is specified) |
| `important` | `boolean` | Whether to use important styling |
| `state` | `BadgeState` | The state variant Only used when type is "state" |
| `award` | `Award` | Award level for achievement badges (gold, silver, bronze) Only used when type is "achievement" or "tag" |
| `userType` | `UserType` | User type for user badges (admin, moderator, staff, ai, bot) Only used when type is "user" |
| `class` | `ClassValue` | Additional CSS classes added to the badge element |

### Story Variations (11)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--base)
- **General**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--general)
- **Reputation**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--reputation)
- **Activity**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--activity)
- **Achievement**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--achievement)
- **Tag**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--tag)
- **States**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--states)
- **Squared**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--squared)
- **Important**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--important)
- **User**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--user)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-badge--sizes)

---

## Components/Bling

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-bling--docs](https://svelte.stackoverflow.design/?path=/docs/components-bling--docs)

### Usage Examples

**Base:**

```svelte
<Bling
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
/>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `name` | `string` | The accessible text provided for screen readers |
| `type` | `Type` | The type of the bling |
| `filled` | `boolean` | Apply filled style to the bling |
| `size` | `Size` | The size of the bling. Only affects filled badges. |
| `class` | `ClassValue` | Additional CSS classes added to the element |

### Story Variations (4)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-bling--base)
- **Types**: [View](https://svelte.stackoverflow.design/?path=/story/components-bling--types)
- **Filled**: [View](https://svelte.stackoverflow.design/?path=/story/components-bling--filled)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-bling--sizes)

---

## Components/Button

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-button--docs](https://svelte.stackoverflow.design/?path=/docs/components-button--docs)

### Usage Examples

**Base:**

```svelte
<Button
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
>
    Ask question
</Button>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `branding` | `Brand` | Applies styling appropriate for the given brand |
| `size` | `Size` | The size of the button |
| `variant` | `Variant` | The weight of the button |
| `weight` | `Weight` | The weight of the button |
| `href` | `string` | Render the button as a link with the given href |
| `disabled` | `boolean` | Boolean describing if the button is disabled |
| `dropdown` | `boolean` | Modifier describing if the button should include an appropriately-styled caret |
| `icon` | `boolean` | Boolean describing if the button contains an icon |
| `link` | `boolean` | Modifier describing if the button should be styled as a link |
| `loading` | `boolean` | Modifier describing if a loading spinner should be showed |
| `i18nLoadingText` | `string` | The i18n loading text |
| `selected` | `boolean` | Modifier describing if the button is selected |
| `unset` | `boolean` | Modifier describing if all button styles should be removed including its focus state |
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `children` | `Snippet` | Snippet for the button content |
| `badge` | ``${number}`` | Optional badge to display on the button |

### Story Variations (7)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--base)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--variants)
- **Loading**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--loading)
- **Dropdown**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--dropdown)
- **Badges**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--badges)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--sizes)
- **Additional styles**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--additional-styles)

---

## Components/Checkbox

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-checkbox--docs](https://svelte.stackoverflow.design/?path=/docs/components-checkbox--docs)

### Usage Examples

**Base:**

```svelte
<Checkbox
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
/>
```

**Bindable value and onchange:**

```svelte
<Checkbox
    name="bindable-checkbox"
    id="bindable-checkbox"
    label="Click me"
    bind:checked={isChecked}
    onchange={() => {
        changeCount++;
    }}
/>
<p class="mt16">
    Checked: {isChecked ? "Yes" : "No"} | Changes: {changeCount}
</p>
```

**Checkmark (checked):**

```svelte
<div class="wmx2">
        <Checkbox
            name="checkbox checkmark example"
            id="Checkbox-checkmark-example"
            label="Checkbox example"
            checkmark
            checked
        />
</div>
```

### Subcomponents

#### CheckboxGroup

### Story Variations (7)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-checkbox--base)
- **Bindable value and onchange**: [View](https://svelte.stackoverflow.design/?path=/story/components-checkbox--bindable-value-and-onchange)
- **Checkmark (checked)**: [View](https://svelte.stackoverflow.design/?path=/story/components-checkbox--checkmark-checked)
- **Checked states**: [View](https://svelte.stackoverflow.design/?path=/story/components-checkbox--checked-states)
- **Description**: [View](https://svelte.stackoverflow.design/?path=/story/components-checkbox--description)
- **State**: [View](https://svelte.stackoverflow.design/?path=/story/components-checkbox--state)
- **Using CheckboxGroup**: [View](https://svelte.stackoverflow.design/?path=/story/components-checkbox--using-checkbox-group)

---

## Components/EmptyState

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-emptystate--docs](https://svelte.stackoverflow.design/?path=/docs/components-emptystate--docs)

### Usage Examples

**Base:**

```svelte
<EmptyState title="No items found" />
```

**Minimal:**

```svelte
<EmptyState >
    {#snippet description()}
        No data found. <Link href="#" underlined>Check back</Link> later.
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `title` | `string` | The optional title to be shown |
| `titleTag` | `string` | Html tag to use for the title |
| `class` | `ClassValue` | Additional CSS classes added to the underlying outer HTML element |
| `description` | `Snippet` | Snippet containing brief text explaining the empty state |
| `actions` | `Snippet` | Optional snippet for actionable buttons |

### Story Variations (2)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-emptystate--base)
- **Minimal**: [View](https://svelte.stackoverflow.design/?path=/story/components-emptystate--minimal)

---

## Components/ExpandingInput

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-expandinginput--docs](https://svelte.stackoverflow.design/?path=/docs/components-expandinginput--docs)

### Usage Examples

**Base:**

```svelte
<ExpandingInput placeholder="Enter your text here…"  />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | The id to pair with a label |
| `variant` | `Variant` | The input's variant |
| `value` | `string` | Initial value to pass to input |
| `key` | `string]: unknown` | - |

### Story Variations (2)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-expandinginput--base)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-expandinginput--variants)

---

## Components/Icon

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-icon--docs](https://svelte.stackoverflow.design/?path=/docs/components-icon--docs)

### Usage Examples

**Base:**

```svelte
<Icon
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
/>
```

**Title:**

```svelte
<Icon src={Icons.IconServiceCCPA} title="CCPA" />
```

**Native:**

```svelte
<Icon src={Icons.IconServiceCCPA} native />
```

**Styles:**

```svelte
<Icon src={Icons.IconServiceCCPA} class="fc-theme-secondary-400" />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `src` | `string` | The source of the SVG |
| `title` | `string` | The value of the nested title tag (will remove the aria-hidden attribute from the rendered SVG) |
| `native` | `boolean` | Boolean describing if the icon should be rendered with its native colors |
| `class` | `ClassValue` | Additional CSS classes added to the SVG element |

### Story Variations (5)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-icon--base)
- **Title**: [View](https://svelte.stackoverflow.design/?path=/story/components-icon--title)
- **Native**: [View](https://svelte.stackoverflow.design/?path=/story/components-icon--native)
- **Styles**: [View](https://svelte.stackoverflow.design/?path=/story/components-icon--styles)
- **Showcase**: [View](https://svelte.stackoverflow.design/?path=/story/components-icon--showcase)

---

## Components/Link

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-link--docs](https://svelte.stackoverflow.design/?path=/docs/components-link--docs)

### Usage Examples

**Base:**

```svelte
<Link
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
>
    Click me
</Link>
```

**Dropdown:**

```svelte
<Link href="#" dropdown>With dropdown</Link>
```

**Disabled:**

```svelte
<Link href="#" disabled>Disabled</Link>
```

**Underlined:**

```svelte
<Link href="#" underlined>Underlined</Link>
```

**Button element:**

```svelte
<Link>Click me</Link>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `href` | `string` | The href of the link. When not provided, renders the component as a `button` element. |
| `variant` | `Variant` | The weight of the link |
| `disabled` | `boolean` | Boolean describing if the link is disabled |
| `dropdown` | `boolean` | Modifier describing if the link should include an appropriately-styled caret |
| `underlined` | `boolean` | Modifier describing if the link should be underlined |
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `children` | `Snippet` | Snippet for the link content |

### Story Variations (6)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--base)
- **Dropdown**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--dropdown)
- **Disabled**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--disabled)
- **Underlined**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--underlined)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--variants)
- **Button element**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--button-element)

---

## Components/Loader

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-loader--docs](https://svelte.stackoverflow.design/?path=/docs/components-loader--docs)

### Usage Examples

**Base:**

```svelte
<Loader label="Loading…" />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | The accessible label for screen readers |
| `size` | `Size` | The size of the spinner |

### Story Variations (2)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-loader--base)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-loader--sizes)

---

## Components/Menu

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-menu--docs](https://svelte.stackoverflow.design/?path=/docs/components-menu--docs)

### Usage Examples

**Base:**

```svelte
<Popover id="base-popover" visible>
    <PopoverContent class="ps-relative is-visible p8 ws2">
        <Menu
            
            class={parseClassValue(
                typeof classArg === "string" ? classArg : undefined
            )}
        >
            {@render basicChildren()}
        </Menu>
    </PopoverContent>
</Popover>
```

**Basic Examples:**

```svelte
<div>
        <div class="ff-mono mb16">Within a popover</div>
        <Popover id="basic-example-popover" visible>
            <PopoverContent class="ps-relative is-visible p8 ws2">
                <Menu>
                    {@render basicChildren()}
                </Menu>
            </PopoverContent>
        </Popover>
    <div>
        <div class="ff-mono mb16">Within a card</div>
        <div class="s-card p8">
            <Menu>
                {@render basicChildren()}
            </Menu>
        </div>
    </div>
    <div>
        <div class="ff-mono mb16">No container</div>
        <Menu>
            {@render basicChildren()}
        </Menu>
    </div>
</div>
```

**Titles and Dividers:**

```svelte
<Popover id="title-and-divider-popover" visible>
    <PopoverContent class="ps-relative is-visible p8 ws2">
        <Menu>
            <MenuTitle>Layout</MenuTitle>
            {@render basicChildren()}
            <MenuDivider class="mxn8" />
            <MenuItem href="#" danger>Deactivate</MenuItem>
            <MenuItem href="#" danger>Delete</MenuItem>
        </Menu>
    </PopoverContent>
</Popover>
```

**Menu Items with Icons:**

```svelte
<Popover id="menu-items-with-icons-popover" visible>
    <PopoverContent class="ps-relative is-visible p8 ws1">
        <Menu>
            <MenuItem href="#" icon={IconHome}>Home</MenuItem>
            <MenuItem href="#" icon={IconInbox}>Inbox</MenuItem>
            <MenuItem href="#" icon={IconSettings}>Settings</MenuItem>
        </Menu>
    </PopoverContent>
</Popover>
```

**In Popover:**

```svelte
<Popover id="menu-popover" placement="bottom">
    <PopoverReference>
        <Button>Open Menu</Button>
    </PopoverReference>
    <PopoverContent class="p8 ws2">
        <Menu>
            {@render basicChildren()}
        </Menu>
    </PopoverContent>
</Popover>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `type` | `Type` | Sets whether the menu is rendered within a fieldset |
| `children` | `Snippet` | Snippet for the menu content |

### Subcomponents

#### MenuCheckItem

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | The id attribute of the input |
| `type` | `Type` | The type attribute of input |
| `name` | `string` | The name attribute of the input |
| `label` | `string` | The label text for the input |
| `checked` | `boolean` | Sets the checked state of the input. |
| `description` | `string` | The description text for the input |
| `disabled` | `boolean` | Sets the disabled state of the input |
| `icon` | `string` | The icon source to display before the menu item content |
| `value` | `string \| number` | The value of the input |
| `class` | `ClassValue` | Additional CSS classes added to the check control container |

#### MenuDivider

| Prop | Type | Description |
|------|------|-------------|
| `class` | `ClassValue` | Additional CSS classes added to the element |

#### MenuItem

| Prop | Type | Description |
|------|------|-------------|
| `href` | `string` | If provided, renders as an anchor tag with this href |
| `danger` | `boolean` | If true, applies danger styling for destructive actions |
| `icon` | `string` | The icon source to display before the menu item content |
| `selected` | `boolean` | If true, marks the menu item as selected |
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `children` | `Snippet` | Snippet for the menu item content |

#### MenuTitle

| Prop | Type | Description |
|------|------|-------------|
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `type` | `Type` | Sets whether the menu title is rendered within a fieldset |
| `children` | `Snippet` | Snippet for the title content |

### Story Variations (6)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-menu--base)
- **Basic Examples**: [View](https://svelte.stackoverflow.design/?path=/story/components-menu--basic-examples)
- **Titles and Dividers**: [View](https://svelte.stackoverflow.design/?path=/story/components-menu--titles-and-dividers)
- **Menu Items with Icons**: [View](https://svelte.stackoverflow.design/?path=/story/components-menu--menu-items-with-icons)
- **Selected States**: [View](https://svelte.stackoverflow.design/?path=/story/components-menu--selected-states)
- **In Popover**: [View](https://svelte.stackoverflow.design/?path=/story/components-menu--in-popover)

---

## Components/Modal

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-modal--docs](https://svelte.stackoverflow.design/?path=/docs/components-modal--docs)

### Usage Examples

**Base:**

```svelte
<Modal id="base-modal" />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | The html id attribute for the modal (required) |
| `visible` | `boolean` | Boolean controlling the visibility of the modal |
| `state` | `State` | The state of the modal |
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `i18nCloseButtonLabel` | `string` | Localized translation for the close button aria label |
| `preventCloseOnClickOutside` | `boolean` | Boolean controlling whether or not the modal should close when the user clicks outside. This is an escape hatch, please consider whether use of this prop is absolutely necessary! |
| `hideCloseButton` | `boolean` | Boolean controlling display of the modal close button. This is an escape hatch, please consider whether use of this prop is absolutely necessary! |
| `onclose` | `() => void` | Callback fired when the modal is closed |
| `header` | `Snippet` | Content rendered in the modal header section |
| `body` | `Snippet` | Content rendered in the modal body section |
| `footer` | `Snippet` | Content rendered in the modal footer section |

### Story Variations (2)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-modal--base)
- **States**: [View](https://svelte.stackoverflow.design/?path=/story/components-modal--states)

---

## Components/Navigation

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-navigation--docs](https://svelte.stackoverflow.design/?path=/docs/components-navigation--docs)

### Usage Examples

**Avatar:**

```svelte
<Navigation class="ws2" label="Avatar" orientation="vertical">
    <NavigationItem
        text="Label 1"
        avatar="https://picsum.photos/32"
        selected={base === "Label 1"}
        onclick={() => (base = "Label 1")}
    />
    <NavigationItem
        text="Label 2"
        avatar="https://picsum.photos/32"
        selected={base === "Label 2"}
        onclick={() => (base = "Label 2")}
    />
</Navigation>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | The aria-label for the navigation |
| `orientation` | `"horizontal" \| "vertical"` | The orientation of the navigation |
| `overflow` | `"wrap" \| "scroll"` | The overflow behavior of the navigation items |
| `size` | `"" \| "sm"` | The size of the navigation items |
| `class` | `ClassValue` | Additional CSS classes added to the outer navigation element |
| `listClass` | `ClassValue` | Additional CSS classes added to the inner list element |
| `children` | `Snippet` | Snippet for the navigation children |

### Subcomponents

#### NavigationGroup

| Prop | Type | Description |
|------|------|-------------|
| `title` | `string` | The title of the navigation section |
| `titleTag` | `string` | Html tag to use for the title: h1, h2, h3, h4, etc. |
| `class` | `ClassValue` | Additional CSS classes added to the outer element |
| `titleClass` | `ClassValue` | Additional CSS classes added to the title element |
| `trailing` | `Snippet` | Optional content rendered at the end of the navigation title. |
| `children` | `Snippet` | The navigation items rendered inside the group |

#### NavigationItem

| Prop | Type | Description |
|------|------|-------------|
| `text` | `string` | The text of the navigation item |
| `href` | `string` | If provided, renders as an anchor tag with this href |
| `selected` | `boolean` | Indicates if the navigation item is selected |
| `icon` | `string` | The icon source to display before the navigation item text |
| `iconSelected` | `string` | The icon source to display when the navigation item is selected |
| `avatar` | `string` | The avatar source to display before the navigation item text |
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `animate` | `boolean` | If true, applies a slide animation to the navigation item. |
| `dropdown` | `Snippet` | Optional snippet for the dropdown content. Use in horizontal navigations. |
| `trailing` | `Snippet` | Optional content rendered at the end of the navigation item. |

### Story Variations (9)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-navigation--base)
- **Horizontal**: [View](https://svelte.stackoverflow.design/?path=/story/components-navigation--horizontal)
- **Vertical**: [View](https://svelte.stackoverflow.design/?path=/story/components-navigation--vertical)
- **Small**: [View](https://svelte.stackoverflow.design/?path=/story/components-navigation--small)
- **Scroll**: [View](https://svelte.stackoverflow.design/?path=/story/components-navigation--scroll)
- **Dropdown**: [View](https://svelte.stackoverflow.design/?path=/story/components-navigation--dropdown)
- **Titles**: [View](https://svelte.stackoverflow.design/?path=/story/components-navigation--titles)
- **Avatar**: [View](https://svelte.stackoverflow.design/?path=/story/components-navigation--avatar)
- **Trailing**: [View](https://svelte.stackoverflow.design/?path=/story/components-navigation--trailing)

---

## Components/Notice

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-notice--docs](https://svelte.stackoverflow.design/?path=/docs/components-notice--docs)

### Usage Examples

**Base:**

```svelte
<Notice
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
    children={content}
/>
```

**Dismissible:**

```svelte
<Notice
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
    dismissible
    onDismiss={() => {
        alert("You clicked dismiss");
    }}
    children={dismissibleContent}
/>
```

**Actions:**

```svelte
<Notice variant="info">
    <span>I am a notice with a Custom Action</span>
    {#snippet actions()}
        <NoticeAction
            class="pr8"
            onclick={() => {
                alert("You triggered a custom action");
            }}>Click me</NoticeAction
        >
    {/snippet}
</Notice>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `variant` | `Variant` | The variant of the notice |
| `important` | `boolean` | Apply important styling to for extra emphasis |
| `role` | `AriaRole \| undefined \| null` | Underlying ARIA role attribute (see https: |
| `iconTitle` | `string` | The title attribute for the icon |
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `dismissible` | `boolean` | Whether to include a dismiss button on the notice or not |
| `onDismiss` | `() => void` | Optional dismiss event handler |
| `i18nDismissButtonLabel` | `string` | Dismiss button label override |
| `children` | `Snippet` | Snippet for the button content |
| `actions` | `Snippet` | Snippet for notice actions |

### Subcomponents

#### NoticeAction

| Prop | Type | Description |
|------|------|-------------|
| `children` | `Snippet` | Snippet for the button content |
| `link` | `boolean` | Modifier describing if the button should be styled as a link |
| `class` | `ClassValue` | Additional CSS class for the button |

### Story Variations (4)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-notice--base)
- **Dismissible**: [View](https://svelte.stackoverflow.design/?path=/story/components-notice--dismissible)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-notice--variants)
- **Actions**: [View](https://svelte.stackoverflow.design/?path=/story/components-notice--actions)

---

## Components/PaginationController

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-paginationcontroller--docs](https://svelte.stackoverflow.design/?path=/docs/components-paginationcontroller--docs)

### Usage Examples

**First page selected of many:**

```svelte
<PaginationController page={1} totalPages={12} />
```

**Intermediate page selected of many:**

```svelte
<PaginationController page={6} totalPages={12} />
```

**Last page selected of many:**

```svelte
<PaginationController page={12} totalPages={12} />
```

**Intermediate page selected of few:**

```svelte
<PaginationController page={2} totalPages={5} />
```

**Only one page:**

```svelte
<PaginationController page={1} totalPages={1} />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `page` | `number` | The current page number |
| `totalPages` | `number` | The total number of pages |
| `urlGenerator` | `(page: number) => string` | Function to generate the URL for a given page number |
| `followLink` | `boolean` | Whether to follow the link natively or rely on the pagechange event |
| `i18nNextText` | `string` | Localized translation for the visible "Next" page link text |
| `i18nPrevText` | `string` | Localized translation for the visible "Prev" page link text |
| `i18nPageText` | `string` | Localized translation for Next/Prev "page" screen reader text |
| `i18nNavigationLabel` | `string` | Localized translation aria-label on nav element wrapping the pagination component |
| `onpagechange` | `(pageNumber: number) => void` | Callback fired when a page is changed |

### Subcomponents

#### Pagination

| Prop | Type | Description |
|------|------|-------------|
| `i18nNavigationLabel` | `string` | Localized translation for the navigation aria-label |
| `children` | `Snippet` | Content rendered in the pagination |

#### PaginationItem

| Prop | Type | Description |
|------|------|-------------|
| `url` | `string` | The URL for the pagination item link |
| `selected` | `boolean` | Whether this pagination item is currently selected |
| `itemNav` | `boolean` | Whether this pagination item is the next page |
| `onclick` | `(e: MouseEvent) => void` | Callback fired when the pagination item is clicked |
| `children` | `Snippet` | Content rendered in the pagination item |

#### PaginationItemClear

### Story Variations (5)

- **First page selected of many**: [View](https://svelte.stackoverflow.design/?path=/story/components-paginationcontroller--first-page-selected-of-many)
- **Intermediate page selected of many**: [View](https://svelte.stackoverflow.design/?path=/story/components-paginationcontroller--intermediate-page-selected-of-many)
- **Last page selected of many**: [View](https://svelte.stackoverflow.design/?path=/story/components-paginationcontroller--last-page-selected-of-many)
- **Intermediate page selected of few**: [View](https://svelte.stackoverflow.design/?path=/story/components-paginationcontroller--intermediate-page-selected-of-few)
- **Only one page**: [View](https://svelte.stackoverflow.design/?path=/story/components-paginationcontroller--only-one-page)

---

## Components/Popover

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-popover--docs](https://svelte.stackoverflow.design/?path=/docs/components-popover--docs)

### Usage Examples

**Base:**

```svelte
<Popover id="popover-base" />
```

**Tooltip:**

```svelte
<Popover id="tooltip" tooltip>
    <PopoverReference>
        <Button>Tooltip</Button>
    </PopoverReference>
    <PopoverContent>Here I am</PopoverContent>
</Popover>

<Popover id="tooltip-interactive" tooltip>
    <PopoverReference>
        <Button>Tooltip Interactive</Button>
    </PopoverReference>
    <PopoverContent>
        <p>This tooltip contains a focusable element.</p>
        <Button>Some action</Button>
    </PopoverContent>
</Popover>
```

**Autoshow:**

```svelte
<Popover id="autoshow" placement="right" autoshow>
    <PopoverReference>
        <Button>Trigger</Button>
    </PopoverReference>
    <PopoverContent>Here I am</PopoverContent>
</Popover>
```

**Horizontal Shift:**

```svelte
<Popover id="horizontal-shift" placement="bottom" autoshow>
    <PopoverReference>
        <Button>Trigger</Button>
    </PopoverReference>
    <PopoverContent class="w-auto wmn0">
        <span style="display: block; width: 220px;">
            Shifted content
        </span>
    </PopoverContent>
</Popover>
```

**Inline Reference:**

```svelte
<Popover id="inline" placement="top">
    <p class="ws3">
        This is is a paragraph <PopoverReference>
            <span role="button" class="s-link"
                >containing a button styled as a link that wraps across
                two lines</span
            >
        </PopoverReference>. It shows the benefit of using floating ui
        inline middleware.
    </p>
    <PopoverContent>Here I am</PopoverContent>
</Popover>
```

**Not Dismissible:**

```svelte
<Popover id="not-dismissable" placement="right" dismissible={false}>
    <PopoverReference>
        <Button>Trigger</Button>
    </PopoverReference>
    <PopoverContent>
        Here I am<PopoverCloseButton />
    </PopoverContent>
</Popover>
```

**Focus Trap:**

```svelte
<Popover
    id="focus-trap"
    placement="right"
    dismissible={false}
    trapFocus={true}
>
    {#snippet children({ close })}
        <PopoverReference>
            <Button>Trigger</Button>
        </PopoverReference>
        <PopoverContent>
            <p class="d-flex fd-column g16">
                The focus is now trapped in the popover.
                <TextInput size="sm" id="name" label="Name"></TextInput>
                <TextInput size="sm" id="surname" label="Surname"
                ></TextInput>
                <Button type="submit" onclick={() => close()}>
                    Submit
                </Button>
                <PopoverCloseButton />
            </p>
        </PopoverContent>
    {/snippet}
</Popover>
```

**Controlled:**

```svelte
<Popover id="controlled" placement="top" {visible}>
        <PopoverReference>
            <Icon src={IconAccessibility} title="Accessibility" />
        </PopoverReference>
        <PopoverContent>Controlled by external state</PopoverContent>
    </Popover>
    <div class="d-flex ai-center g8 mt24">
        <label class="s-label" for="popover-visibility-control">
            Visibility
        </label>
        <input
            class="s-toggle-switch"
            id="popover-visibility-control"
            type="checkbox"
            checked={visible}
            onclick={onToggle}
        />
</div>
```

**External Reference:**

```svelte
<p class="wmx3 pb12 ta-center">
    This API is particularly useful when the reference element is
    outside the svelte codebase<br /> (e.g. in a Razor view)
</p>
<button class="s-btn" id="external-reference-element">
    External Reference
</button>
<Popover id="external-reference" placement="bottom">
    <PopoverReference elementId="external-reference-element" />
    <PopoverContent>
        Here I am<PopoverCloseButton />
    </PopoverContent>
</Popover>
```

**Events:**

```svelte
<Popover
    id="events"
    placement="right"
    onopen={() => (lastEvent = "opened")}
    onclose={() => (lastEvent = "closed")}
>
    {#snippet children({ visible })}
        <PopoverReference>
            <Button>Trigger</Button>
        </PopoverReference>
        <PopoverContent>Here I am</PopoverContent>
        <p class="mt12">Visible: {visible}</p>
    {/snippet}
</Popover>
<p>Last Event: {lastEvent}</p>
```

**Custom Classes:**

```svelte
<Popover id="custom-classes">
    <PopoverReference>
        <Button>Custom Classes</Button>
    </PopoverReference>
    <PopoverContent
        class="w-auto wmn0"
        contentClass="p0 mn0 ta-center fw-bold"
    >
        No padding<br />
        No margin
    </PopoverContent>
</Popover>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | The html id attribute for the popover (required) |
| `autoshow` | `boolean` | Whether or not the popover should be visible on mount |
| `visible` | `boolean` | Boolean describing if the popover panel should be visible or not. If not specified, the component is uncontrolled and toggling behavior is automatically taken care of. When specified, the component is controlled by the consumer and the internal open/closed state is ignored. |
| `placement` | `Placement` | Dictates where to place the popover in relation to the reference element |
| `strategy` | `Strategy` | The type of CSS position property to use for the popover content. See https: |
| `trapFocus` | `boolean` | Whether or not the popover should trap focus within itself When active make sure to include in the popover content a way for the user dismiss the popover (e.g. a cancel button or the PopoverCloseButton component) |
| `dismissible` | `boolean` | Whether or not the popover should close when clicking outside of it or in the reference element |
| `tooltip` | `boolean` | Enables tooltip interactions. Tooltips open on hover for hover-capable devices or keyboard focus, toggle on touch, and ignore mouse clicks. They close when hover or focus leaves, when touch repeats, or—when dismissible—on outside interaction or Escape. |
| `onopen` | `() => void` | Callback fired when the popover is opened |
| `onclose` | `() => void` | Callback fired when the popover is closed |
| `onoutclick` | `() => void` | Callback fired when a click occurs outside the popover. Use this to control what happens on outside clicks (e.g., close the popover in manually controlling visibility). |
| `children` | `Snippet< [ { visible: boolean` | Children snippet with visible, open, and close parameters |
| `open` | `() => void` | - |
| `close` | `() => void` | - |

### Subcomponents

#### PopoverCloseButton

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | The aria-label for the close button |
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `onclick` | `(e: MouseEvent) => void` | Callback fired when the close button is clicked |

#### PopoverContent

| Prop | Type | Description |
|------|------|-------------|
| `role` | `string \| null` | The aria role of the popover (if not specified, it will default to 'dialog' for popovers or 'tooltip' when in tooltip mode) |
| `ariaLabel` | `string` | Accessible label for the popover |
| `ariaLabelledby` | `string` | ID of an element that labels the popover |
| `class` | `ClassValue` | Additional CSS classes added to the s-popover element |
| `contentClass` | `ClassValue` | Additional CSS classes added to the s-popover--content element |
| `children` | `Snippet` | Children snippet |

#### PopoverReference

| Prop | Type | Description |
|------|------|-------------|
| `elementId` | `string \| null` | The id of the reference element (this is an alternative to passing the element as a slot) |
| `children` | `Snippet` | Children snippet |

### Story Variations (14)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--base)
- **Tooltip**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--tooltip)
- **Nested tooltip references**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--nested-tooltip-references)
- **Autoshow**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--autoshow)
- **Placements**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--placements)
- **Horizontal Shift**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--horizontal-shift)
- **Strategies**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--strategies)
- **Inline Reference**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--inline-reference)
- **Not Dismissible**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--not-dismissible)
- **Focus Trap**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--focus-trap)
- **Controlled**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--controlled)
- **External Reference**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--external-reference)
- **Events**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--events)
- **Custom Classes**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--custom-classes)

---

## Components/PostSummary

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-postsummary--docs](https://svelte.stackoverflow.design/?path=/docs/components-postsummary--docs)

### Usage Examples

**Gated:**

```svelte
<!-- `gated` prop is true -->
<PostSummary {...baseArgs} gated />
```

**Answered:**

```svelte
<!-- `bounty` prop included -->
<PostSummary {...baseArgs} acceptedAnswer />
```

**Bounty:**

```svelte
<!-- `bounty` prop included -->
<PostSummary {...baseArgs} bounty={50} />
```

**Comments:**

```svelte
<!-- `comments` prop included -->
<PostSummary {...baseArgs} comments={10} />
```

**Read Time:**

```svelte
<!-- `readTime` prop included -->
<PostSummary {...baseArgs} readTime="5 minute read" />
```

**Ignored:**

```svelte
<!-- `ignored` tag included in tags snippet -->
<PostSummary {...baseArgs}>
    {#snippet tags()}
        <Tag href="#" ignored>retrieval-augmented-generation</Tag>
        <Tag href="#">langchain</Tag>
        <Tag href="#">llm</Tag>
        <Tag href="#">vector-database</Tag>
        <Tag href="#">ai</Tag>
    {/snippet}
</PostSummary>
```

**Watched:**

```svelte
<!-- `watched` tag included in tags snippet -->
<PostSummary {...baseArgs}>
    {#snippet tags()}
        <Tag href="#" watched>retrieval-augmented-generation</Tag>
        <Tag href="#">langchain</Tag>
        <Tag href="#">llm</Tag>
        <Tag href="#">vector-database</Tag>
        <Tag href="#">ai</Tag>
        <Tag href="#">data-insights</Tag>
    {/snippet}
</PostSummary>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `href` | `string` | The URL to navigate to when the post title is clicked |
| `title` | `string` | The title of the post |
| `readableTimestamp` | `string` | The human readable timestamp of the post including any verb describing the action associated with the post (e.g. "asked", "answered", etc.) |
| `utcTimestamp` | `Date \| SvelteDate \| string` | /** The UTC timestamp of the post Should be a valid Date, ISO string, or timestamp number. |
| `userAvatar` | `string` | Avatar image source of post author |
| `userName` | `string` | The display name of the post author |
| `userProfileUrl` | `string` | Link to the post author's profile |
| `userReputation` | `number` | The reputation of the post author |
| `acceptedAnswer` | `boolean` | Apply styling to the "answers" stats item to indicate the post has an accepted answer |
| `answers` | `number` | Count of answers on the post |
| `bounty` | `number` | The bounty placed on the post |
| `comments` | `number` | Count of comments on the post |
| `contentType` | `ContentType` | The content type of the post to be indicated on the post summary |
| `excerpt` | `string` | A brief excerpt of the post content |
| `excerptLines` | `ExcerptLines` | The size of the excerpt text |
| `gated` | `boolean` | Indicate a post is by displaying a shield icon before the title |
| `readTime` | `string` | The readtime on the post |
| `state` | `State` | The state of the post which affects its styling |
| `views` | `number` | Count of views on the post |
| `votes` | `number` | Count of votes on the post |
| `i18nAcceptedAnswerIconTitle` | `string` | Label to be provided for the "accepted answer" checkmark icon on the "answers" stats item |
| `i18nAnswersUnit` | `string` | Text for the views stats item unit |
| `i18nBountyUnit` | `string` | Text for the bounty stats item unit |
| `i18nCommentsUnit` | `string` | Text for the comments stats item unit |
| `i18nContentTypeText` | `string` | Text for the content type |
| `i18nGatedTitle` | `string` | Text on gated posts for the shield icon that preceeds the post title |
| `i18nReputationBlingName` | `string` | Text for the reputation bling name |
| `i18nStateBadgeText` | `string` | Text for the state badge |
| `i18nViewsUnit` | `string` | Text for the views stats item unit |
| `i18nVotesUnit` | `string` | Text for the votes stats item unit |
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `tags` | `Snippet` | Snippet for tags |
| `answerPreviews` | `Snippet` | Snippet for answer previews |

### Subcomponents

#### PostSummaryAnswer

| Prop | Type | Description |
|------|------|-------------|
| `excerpt` | `string` | A brief excerpt of the answer |
| `href` | `string` | The URL to navigate to when the "View answers" link is clicked |
| `readableTimestamp` | `string` | /** The human readable timestamp of the answer including any verb describing the action associated with the answer (e.g. "answered", "commented", etc.) |
| `utcTimestamp` | `Date \| SvelteDate \| string` | The UTC timestamp of the answer Should be a valid Date, ISO string, or timestamp number. |
| `userAvatar` | `string` | Avatar image source of answer's author |
| `userName` | `string` | The display name of the answer author |
| `userProfileUrl` | `string` | Link to the answer author's profile |
| `userReputation` | `string \| number` | The reputation of the answer author |
| `votes` | `number` | Count of votes on the answer |
| `accepted` | `boolean` | Display the "Accepted answer" stats item |
| `i18nAcceptedAnswerText` | `string` | The text for "Accepted answer" stats item |
| `i18nReputationBlingName` | `string` | Text for the votes stats item unit |

#### PostSummaryContentType

| Prop | Type | Description |
|------|------|-------------|
| `name` | `ContentTypeName` | The type of content to indicate |
| `href` | `string` | The URL to navigate to when the content type is clicked |
| `i18nContentTypeText` | `string \| undefined` | The excerpt text to be displayed |

#### PostSummaryExcerpt

| Prop | Type | Description |
|------|------|-------------|
| `excerpt` | `string` | The excerpt text to be displayed |
| `lines` | `ExcerptLines` | The number of lines to truncate the excerpt text |
| `truncate` | `boolean` | Whether to truncate the excerpt text |

#### PostSummaryStateBadge

| Prop | Type | Description |
|------|------|-------------|
| `state` | `PostSummaryStateBadge` | The state of the post, which affects its styling |
| `i18nText` | `string \| undefined` | Text to display in the badge |

### Story Variations (12)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--base)
- **Excerpt Lines**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--excerpt-lines)
- **Gated**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--gated)
- **Answered**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--answered)
- **Bounty**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--bounty)
- **Comments**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--comments)
- **Read Time**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--read-time)
- **Content Type**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--content-type)
- **Ignored**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--ignored)
- **Watched**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--watched)
- **States**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--states)
- **Optional slots**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--optional-slots)

---

## Components/RadioGroup

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-radiogroup--docs](https://svelte.stackoverflow.design/?path=/docs/components-radiogroup--docs)

### Usage Examples

**Base:**

```svelte
<RadioGroup label="Which fruit do you prefer?" name="fruit-preference" options={baseOptions} />
```

**Bindable value and onchange:**

```svelte
<RadioGroup
    label="Which fruit do you prefer?"
    name="fruit-bindable-onchange"
    options={baseOptions}
    bind:value={radioValue}
    onValueChange={(newValue) => {
        if (previousValue !== undefined && previousValue !== newValue) {
            changeCount++;
        }
        previousValue = newValue;
    }}
/>
<p class="mt16">
    Selected: {radioValue} | Changes: {changeCount}
</p>
```

**Disabled:**

```svelte
<RadioGroup
    label="Which fruit do you prefer?"
    name="fruit-disabled"
    options={baseOptions}
    disabled
/>
```

**Horizontal:**

```svelte
<RadioGroup
    label="Which fruit do you prefer?"
    name="fruit-horizontal"
    options={baseOptions.map(
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        ({ description, ...opt }) => opt
    )}
    horizontal
/>
```

**Checkmark style:**

```svelte
<RadioGroup
    label="Which fruit do you prefer?"
    name="fruit-checkmark"
    options={baseOptions.map((opt) => ({ ...opt, checkmark: true }))}
/>
```

### Subcomponents

#### Radio

### Story Variations (7)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-radiogroup--base)
- **Bindable value and onchange**: [View](https://svelte.stackoverflow.design/?path=/story/components-radiogroup--bindable-value-and-onchange)
- **Disabled**: [View](https://svelte.stackoverflow.design/?path=/story/components-radiogroup--disabled)
- **Horizontal**: [View](https://svelte.stackoverflow.design/?path=/story/components-radiogroup--horizontal)
- **Checkmark style**: [View](https://svelte.stackoverflow.design/?path=/story/components-radiogroup--checkmark-style)
- **States**: [View](https://svelte.stackoverflow.design/?path=/story/components-radiogroup--states)
- **Standalone Radio component**: [View](https://svelte.stackoverflow.design/?path=/story/components-radiogroup--standalone-radio-component)

---

## Components/Select

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-select--docs](https://svelte.stackoverflow.design/?path=/docs/components-select--docs)

### Usage Examples

**Base:**

```svelte
<Select id="select-base" label="Base" />
```

**Label status:**

```svelte
<Select
    id="select-label-status-danger"
    label="Sort"
    labelStatus="danger"
    labelStatusText="Required"
>
    <SelectItem value="relevance" text="Relevance" />
    <SelectItem value="newest" text="Newest" />
    <SelectItem value="active" text="Active" />
    <SelectItem value="score" text="Score" />
</Select>
<Select
    id="select-label-status-featured"
    label="Sort"
    labelStatus="featured"
    labelStatusText="New"
    labelPlacement="left"
>
    <SelectItem value="relevance" text="Relevance" />
    <SelectItem value="newest" text="Newest" />
    <SelectItem value="active" text="Active" />
    <SelectItem value="score" text="Score" />
</Select>
```

**With Description and Message:**

```svelte
<Select
    id="select-with-description-and-message"
    label="With Description and Message"
>
    {#snippet description()}
        Select the sorting order
    {/snippet}
    <SelectItem value="relevance" text="Relevance" />
    <SelectItem value="newest" text="Newest" />
    <SelectItem value="active" text="Active" />
    <SelectItem value="score" text="Score" />
    {#snippet message()}
        The available sorting orders are Relevance, Newest, Active, and
        Score
    {/snippet}
</Select>
```

**Disabled:**

```svelte
<Select id="select-disabled" label="Disabled" disabled>
    <SelectItem value="relevance" text="Relevance" />
    <SelectItem value="newest" text="Newest" />
    <SelectItem value="active" text="Active" />
    <SelectItem value="score" text="Score" />
</Select>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | `id` attribute of the select element |
| `label` | `string` | The label associated with the select element |
| `labelStatus` | `BadgeState` | The optional status type of the label |
| `labelStatusText` | `string` | The optional text to display for the label status |
| `selected` | `string \| number` | Specify the initial selected item value |
| `disabled` | `boolean` | Sets the disabled state |
| `hideLabel` | `boolean` | The visiblity of the label element |
| `name` | `string` | Name attribute of the select element |
| `size` | `Size` | The size of the select |
| `state` | `State` | The validation state of the select |
| `labelPlacement` | `LabelPlacement` | The placement of the label relative to the select |
| `children` | `Snippet` | Snippet to render options as SelectItem components |
| `description` | `Snippet` | Snippet to render a description between the label and the select (only when label is visible and placed on top) |
| `message` | `Snippet` | Snippet to render a message after the select element |

### Subcomponents

#### SelectItem

| Prop | Type | Description |
|------|------|-------------|
| `value` | `string \| number` | Specify the option value |
| `text` | `string` | Specify the option text |
| `disabled` | `boolean` | Set to `true` to disable the option |

### Story Variations (7)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--base)
- **Label placement**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--label-placement)
- **Label status**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--label-status)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--sizes)
- **State**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--state)
- **With Description and Message**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--with-description-and-message)
- **Disabled**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--disabled)

---

## Components/Tag

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-tag--docs](https://svelte.stackoverflow.design/?path=/docs/components-tag--docs)

### Usage Examples

**Base:**

```svelte
<Tag children={"javascript" as unknown as Snippet} />
```

**Sponsor:**

```svelte
<Tag>
    microsoft
    {#snippet sponsor()}
        <Icon src={IconServiceMicrosoft} native class="as-center w16" />
    {/snippet}
</Tag>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `size` | `Size` | The size of the tag |
| `variant` | `Variant` | The variants of the tag |
| `href` | `string` | Render the tag as a link with the given href |
| `dismissable` | `boolean` | Boolean describing if the tag is dismissable This only takes effect if the href prop is not set |
| `ignored` | `boolean` | Boolean describing if the tag is ignored |
| `watched` | `boolean` | Boolean describing if the tag is watched |
| `i18nDismissButtonText` | `string` | Localized translation for the dismiss button text |
| `i18nSponsorTagText` | `string` | Localized translation for sponsored status text |
| `i18nWatchedTagText` | `string` | Localized translation for watched status text |
| `i18nIgnoredTagText` | `string` | Localized translation for ignored status text |
| `i18nModeratorTagText` | `string` | Localized translation for moderator status text |
| `i18nRequiredTagText` | `string` | Localized translation for required status text |
| `class` | `ClassValue` | Additional CSS classes added to the element |
| `ondismiss` | `() => void` | Callback function to call when the tag is dismissed |
| `children` | `Snippet` | Snippet containing the tag name |
| `sponsor` | `Snippet` | Optional snippet for displaying a sponsor icon before the tag name |

### Story Variations (5)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-tag--base)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-tag--variants)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-tag--sizes)
- **Sponsor**: [View](https://svelte.stackoverflow.design/?path=/story/components-tag--sponsor)
- **Additional styles**: [View](https://svelte.stackoverflow.design/?path=/story/components-tag--additional-styles)

---

## Components/TextArea

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-textarea--docs](https://svelte.stackoverflow.design/?path=/docs/components-textarea--docs)

### Usage Examples

**Base:**

```svelte
<TextArea id="base-example-input" label="Question body" placeholder={"e.g. The Stack Overflow glyph used to have 6 bars} />
```

**Status:**

```svelte
<div class="d-flex fd-column">
        <TextArea
            id="required-status-input"
            placeholder="Full name"
            label="required input"
            required
        >
            {#snippet description()}
                <span>this input has been marked required.</span>
            {/snippet}
        </TextArea>
</div>
```

**Label status:**

```svelte
<TextArea
    id="label-status-danger-input"
    placeholder="Placeholder text should not replace labels"
    label="Question title"
    labelStatus="danger"
    labelStatusText="Required"
/>
<TextArea
    id="label-status-tonal-input"
    placeholder="Placeholder text should not replace labels"
    label="Question tags"
    labelStatusText="Optional"
/>
<TextArea
    id="label-status-saved-input"
    placeholder="Placeholder text should not replace labels"
    label="What is your favourite animal?"
    labelStatus="info"
    labelStatusText="Saved for later"
/>
<TextArea
    id="label-status-info-input"
    placeholder="e.g. user@example.com"
    label="Notify people"
    labelStatus="featured"
    labelStatusText="New feature"
/>
```

**Disabled and readonly:**

```svelte
<p class="s-description mb24">
    `disabled` and `readonly` props add a custom style to the textarea. All
    other props are proxied to the underlying textarea element.
</p>
<hr class="fc-black-050 mb24" />
    <div class="d-flex fd-column">
        <TextArea
            id="disabled-input"
            label="disabled input"
            placeholder="Disabled input"
            disabled
        />
    <div class="d-flex fd-column">
        <TextArea
            id="readonly-input"
            label="readonly input"
            placeholder="Readonly input"
            readonly
        />
    </div>
</div>
```

**Snippets:**

```svelte
<p>The examples below show all the snippets this component supports.</p>
    <div class="d-flex fd-column">
        <TextArea
            id="description-snippet-input"
            label="Description snippet"
        >
            {#snippet description()}
                <span>This TextArea includes a description snippet.</span>
            {/snippet}
        </TextArea>
    <div class="d-flex fd-column">
        <TextArea id="message-snippet-input" label="Message snippet">
            {#snippet message()}
                <span>This TextArea includes a message snippet.</span>
            {/snippet}
        </TextArea>
    </div>
</div>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | `id` attribute of the text input |
| `label` | `string` | The label associated with the input |
| `labelStatus` | `BadgeState` | The optional status type of the label |
| `labelStatusText` | `string` | The optional text to display for the label status |
| `disabled` | `boolean` | Sets the disabled state of the input |
| `hideLabel` | `boolean` | The visiblity of the label element |
| `name` | `string` | Name attribute of the textarea |
| `placeholder` | `string` | Placeholder text for the input |
| `readonly` | `boolean` | Sets the readonly state of the input |
| `required` | `boolean` | Make the input required and show required label status |
| `size` | `Size` | The size of the text input |
| `state` | `State` | The size of the text input |
| `class` | `ClassValue` | Additional CSS classes added to the underlying HTML input element |
| `i18nRequiredText` | `string` | Localized translation for the required label status text |
| `description` | `Snippet` | Optional description snippet rendered between the label and input. |
| `message` | `Snippet` | Optional message snippet rendered after the input. |

### Story Variations (8)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-textarea--base)
- **Label visibility**: [View](https://svelte.stackoverflow.design/?path=/story/components-textarea--label-visibility)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-textarea--sizes)
- **States**: [View](https://svelte.stackoverflow.design/?path=/story/components-textarea--states)
- **Status**: [View](https://svelte.stackoverflow.design/?path=/story/components-textarea--status)
- **Label status**: [View](https://svelte.stackoverflow.design/?path=/story/components-textarea--label-status)
- **Disabled and readonly**: [View](https://svelte.stackoverflow.design/?path=/story/components-textarea--disabled-and-readonly)
- **Snippets**: [View](https://svelte.stackoverflow.design/?path=/story/components-textarea--snippets)

---

## Components/TextInput

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-textinput--docs](https://svelte.stackoverflow.design/?path=/docs/components-textinput--docs)

### Usage Examples

**Base:**

```svelte
<TextInput id="base-example-input" label="Username" />
```

**Status:**

```svelte
<div class="d-flex fd-column">
        <TextInput
            id="required-status-input"
            placeholder="Full name"
            label="required input"
            required
        >
            {#snippet description()}
                <span>this input has been marked required.</span>
            {/snippet}
        </TextInput>
</div>
```

**Label status:**

```svelte
<TextInput
    id="label-status-danger-input"
    placeholder="Placeholder text should not replace labels"
    label="Question title"
    labelStatus="danger"
    labelStatusText="Required"
/>
<TextInput
    id="label-status-tonal-input"
    placeholder="Placeholder text should not replace labels"
    label="Question tags"
    labelStatusText="Optional"
/>
<TextInput
    id="label-status-saved-input"
    placeholder="Placeholder text should not replace labels"
    label="What is your favourite animal?"
    labelStatus="info"
    labelStatusText="Saved for later"
/>
<TextInput
    id="label-status-info-input"
    placeholder="e.g. user@example.com"
    label="Notify people"
    labelStatus="featured"
    labelStatusText="New feature"
/>
```

**Disabled and readonly:**

```svelte
<p class="s-description mb24">
    `disabled` and `readonly` props add a custom style to the input. All
    other props are proxied to the underlying HTML input element.
</p>
<hr class="fc-black-050 mb24" />
    <div class="d-flex fd-column">
        <TextInput
            id="disabled-input"
            label="disabled input"
            placeholder="Disabled input"
            disabled
        />
    <div class="d-flex fd-column">
        <TextInput
            id="readonly-input"
            label="readonly input"
            placeholder="Readonly input"
            readonly
        />
    </div>
</div>
```

**Bindable Value:**

```svelte
<div class="d-flex fd-column">
        <TextInput
            id="binding-input"
            label="Bindable input"
            bind:value={bindableValue}
        />
        <p class="mt24">
            <span class="fw-bold">Bound value:</span>
            {bindableValue}
        </p>
</div>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | `id` attribute of the text input |
| `label` | `string` | The label associated with the input |
| `labelStatus` | `BadgeState` | The optional status type of the label |
| `labelStatusText` | `string` | The optional text to display for the label status |
| `disabled` | `boolean` | Sets the disabled state of the input |
| `hideLabel` | `boolean` | The visiblity of the label element |
| `fillSide` | `FillSide` | Where to place the input fill element |
| `name` | `string` | Name attribute of the input |
| `placeholder` | `string` | Placeholder text for the input |
| `readonly` | `boolean` | Sets the readonly state of the input |
| `required` | `boolean` | Make the input required and show required label status |
| `size` | `Size` | The size of the text input |
| `state` | `State` | The size of the text input |
| `type` | `Type` | The type of the text input |
| `class` | `ClassValue` | Additional CSS classes added to the underlying HTML input element |
| `i18nRequiredText` | `string` | Localized translation for the required label status text |
| `description` | `Snippet` | Optional description snippet rendered between the label and input. |
| `fill` | `Snippet` | Optional fill snippet rendered either before or after the input based on the value of `fillSide`. |
| `message` | `Snippet` | Optional message snippet rendered after the input. |
| `value` | `string` | value of the text input. |

### Story Variations (11)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--base)
- **Input fill**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--input-fill)
- **Label visibility**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--label-visibility)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--sizes)
- **States**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--states)
- **Status**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--status)
- **Label status**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--label-status)
- **Types**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--types)
- **Disabled and readonly**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--disabled-and-readonly)
- **Snippets**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--snippets)
- **Bindable Value**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--bindable-value)

---

## Components/Toast

To show and hide toasts you need to first ensure that a `Toaster` component is rendered in your page.
Ideally only one `Toaster` component is rendered per page.

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-toast--docs](https://svelte.stackoverflow.design/?path=/docs/components-toast--docs)

### API

#### showToast(message, options)

| Parameter | Type | Description |
|-----------|------|-------------|
| `message` | `string \| Snippet (required)` | Toast message as plain text or Svelte Snippet |
| `options` | `ToastOptions` | Configuration object (see ToastOptions below) |

#### ToastOptions

| Parameter | Type | Description |
|-----------|------|-------------|
| `variant` | `danger \\| warning \\| info \\| success` | Visual style of the toast |
| `important` | `boolean` | Emphasize the toast |
| `icon` | `string` | Icon source for example from the stacks-icons package |
| `iconTitle` | `string` | Accessible title for the icon |
| `transient` | `boolean` | Auto-dismiss the toast after `duration` (default: true) |
| `dismissible` | `boolean` | Render a close action to allow user dismissal (default: true) |
| `duration` | `number` | Auto-dismiss delay in ms (when `transient` is true) (default: 10000) |
| `onUserClose` | `() => void` | Fired when the user closes the toast |
| `onAutoClose` | `() => void` | Fired when the toast auto-closes |
| `onClose` | `() => void` | Fired on any close (user or auto) |
| `actions` | `Snippet` | Custom action buttons (e.g. `<NoticeAction>`) |

#### hideToast(toastId)

| Parameter | Type | Description |
|-----------|------|-------------|
| `toastId` | `string \| number (required)` | ID returned by `showToast` |

### Subcomponents

#### Toast

### Story Variations (8)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--base)
- **With HTML Message**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--with-html-message)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--variants)
- **Not dismissible**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--not-dismissible)
- **Persistency and Duration**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--persistency-and-duration)
- **With Actions**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--with-actions)
- **On Close Callbacks**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--on-close-callbacks)
- **Closed Externally**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--closed-externally)

---

## Components/UserCard

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-usercard--docs](https://svelte.stackoverflow.design/?path=/docs/components-usercard--docs)

### Props

| Prop | Type | Description |
|------|------|-------------|
| `name` | `string` | Name of user to be displayed |
| `avatar` | `string` | Avatar image source of user |
| `profileUrl` | `string` | Link to the user's profile |
| `size` | `Size` | The size of the user card |
| `designation` | `string` | Job designation of the user |
| `location` | `string` | Location of the user |
| `time` | `Snippet` | Snippet used to display post activity time |
| `blings` | `Snippet` | Snippet used to display user blings |
| `badges` | `Snippet` | Snippet used to display user badges |
| `recognition` | `Snippet` | Snippet used to display user recognition |
| `bio` | `Snippet` | Snippet used to display user bio |
| `additionalBlings` | `Snippet` | Snippet used to display user additional blings |
| `originalPoster` | `boolean` | Identifies if the user card is the original poster |
| `i18nOpTooltipText` | `string` | The text for the original poster tooltip |
| `i18nDeletedTooltipText` | `string` | The text for the deleted user tooltip |
| `deleted` | `boolean` | Identifies if the user has been deleted |
| `class` | `ClassValue` | Additional CSS classes added to the element |

### Subcomponents

#### AvatarDeleted

| Prop | Type | Description |
|------|------|-------------|
| `size` | `Size` | - |

#### UserCardAdditionalBling

| Prop | Type | Description |
|------|------|-------------|
| `tooltipText` | `string` | The text for the tooltip |
| `id` | `string` | Unique id for the popover |
| `icon` | `string` | The additional bling icon |
| `href` | `string` | Link for the additional bling element (e.g. leaderboard or collective landing page) |
| `class` | `ClassValue` | Additional CSS classes added to the element |

#### UserCardBadge

| Prop | Type | Description |
|------|------|-------------|
| `type` | `UserType` | The type of user badge |
| `tooltip` | `Snippet` | Snippet used to display tooltip content |

#### UserCardBling

| Prop | Type | Description |
|------|------|-------------|
| `type` | `BlingType` | The type of bling |
| `name` | `string` | The accessible text provided for screen readers |
| `text` | `string \| number` | The text to display next to the bling |

#### UserCardTime

| Prop | Type | Description |
|------|------|-------------|
| `text` | `string` | Text to display instead of the formatted time |
| `timestamp` | `Date \| SvelteDate \| string` | Precise date and time of the post in ISO format |
| `href` | `string` | Link to post activity |

### Story Variations (5)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--base)
- **Badges**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--badges)
- **All Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--all-sizes)
- **States**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--states)
- **Additional Bling**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--additional-bling)

---

## Components/Vote

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-vote--docs](https://svelte.stackoverflow.design/?path=/docs/components-vote--docs)

### Usage Examples

**Base:**

```svelte
<Vote
    total={total ?? 0}
    
    class={parseClassValue(
        typeof classArg === "string" ? classArg : undefined
    )}
/>
```

**Counts:**

```svelte
<Vote total={0} />
<Vote total={12} />
<Vote total={25789} />
<Vote total={50234567} />
<Vote total={-1} />
```

**Expandable:**

```svelte
<Vote total={20} upvotes={28} downvotes={8} />
<Vote total={5234} upvotes={5642} downvotes={408} />
```

**Horizontal:**

```svelte
<Vote total={12} horizontal />
<Vote total={25789} horizontal />
<Vote total={0} horizontal />
```

**Voted:**

```svelte
<Vote total={13} status="upvoted" />
<Vote total={11} status="downvoted" />
<Vote total={13} status="upvoted" horizontal />
```

**Upvote only:**

```svelte
<Vote total={13} upvoteOnly horizontal />
```

**With State Utility:**

```svelte
{@const voteState = createVoteState({
    total: 42,
    upvotes: 50,
    downvotes: 8,
    onUpvote: async () => {
        // Simulate server delay
        await new Promise((resolve) => setTimeout(resolve, 300));
        console.log("Upvote sent to server");
    },
    onDownvote: async () => {
        await new Promise((resolve) => setTimeout(resolve, 300));
        console.log("Downvote sent to server");
    },
})}
    <Vote {...voteState} />
    <p class="fs-caption fc-medium">
        Click the vote buttons - state is managed automatically with
        optimistic updates
    </p>
```

**With Error Rollback:**

```svelte
{@const voteState = createVoteState({
    total: 10,
    onUpvote: async () => {
        await new Promise((resolve) => setTimeout(resolve, 500));
        throw new Error("Server error - vote rolled back");
    },
    onDownvote: async () => {
        await new Promise((resolve) => setTimeout(resolve, 500));
        throw new Error("Server error - vote rolled back");
    },
})}
    <Vote {...voteState} />
    <p class="fs-caption fc-medium">
        Votes will rollback after 500ms (simulated server error)
    </p>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `total` | `number` | The total vote count to display |
| `upvotes` | `number` | Number of upvotes. When provided along with downvotes, enables expandable vote counts. |
| `downvotes` | `number` | Number of downvotes. When provided along with upvotes, enables expandable vote counts. |
| `horizontal` | `boolean` | Display the vote component in horizontal layout. |
| `upvoteOnly` | `boolean` | Display the vote component with only upvote button. |
| `status` | `Status` | Current vote status. Use "upvoted" or "downvoted" to show filled icons, or null for no vote. |
| `i18nVote` | `string` | Text to display when total is 0 and no vote has been cast. Defaults to "Vote". |
| `i18nUpvote` | `string` | Screen reader text for the upvote button. Defaults to "Upvote". |
| `i18nUpvoted` | `string` | Screen reader text for the upvote button when upvoted. Defaults to "Upvoted". |
| `i18nDownvote` | `string` | Screen reader text for the downvote button. Defaults to "Downvote". |
| `i18nDownvoted` | `string` | Screen reader text for the downvote button when downvoted. Defaults to "Downvoted". |
| `i18nExpand` | `string` | Screen reader text for the vote count when not expanded. Defaults to "Show vote details". |
| `i18nExpanded` | `string` | Screen reader text for the vote count when expanded. Defaults to "Hide vote details". |
| `onupvoteclick` | `() => void` | Callback fired when the upvote button is clicked. |
| `ondownvoteclick` | `() => void` | Callback fired when the downvote button is clicked. |
| `class` | `ClassValue` | Additional CSS classes added to the element |

### Story Variations (8)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-vote--base)
- **Counts**: [View](https://svelte.stackoverflow.design/?path=/story/components-vote--counts)
- **Expandable**: [View](https://svelte.stackoverflow.design/?path=/story/components-vote--expandable)
- **Horizontal**: [View](https://svelte.stackoverflow.design/?path=/story/components-vote--horizontal)
- **Voted**: [View](https://svelte.stackoverflow.design/?path=/story/components-vote--voted)
- **Upvote only**: [View](https://svelte.stackoverflow.design/?path=/story/components-vote--upvote-only)
- **With State Utility**: [View](https://svelte.stackoverflow.design/?path=/story/components-vote--with-state-utility)
- **With Error Rollback**: [View](https://svelte.stackoverflow.design/?path=/story/components-vote--with-error-rollback)

---

## Generation Info

- **Generated:** 2026-09-18T21:57:51.721Z
- **Components:** 27
- **Stories:** 168