> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-e6426361.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Comments Sidebar Button Primitives

> Primitive components for building custom Comments Sidebar Button UIs — compose the trigger button, badge, and icon from low-level Velt building blocks.

<Tip>
  Explore primitives interactively in our [Storybook](https://storybook.velt.dev/).
</Tip>

<Note>
  Sidebar Button primitives use the shared `default` context, so standalone usage renders real comment counts and unread indicators without a parent root component.
</Note>

### VeltSidebarButtonIcon

Icon displayed within the sidebar button.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltSidebarButtonIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-sidebar-button-icon annotation-id="abc123"></velt-sidebar-button-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltSidebarButtonCommentsCount

Comments count displayed within the sidebar button.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltSidebarButtonCommentsCount annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-sidebar-button-comments-count annotation-id="abc123"></velt-sidebar-button-comments-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltSidebarButtonUnreadIcon

Unread indicator icon displayed within the sidebar button.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltSidebarButtonUnreadIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-sidebar-button-unread-icon annotation-id="abc123"></velt-sidebar-button-unread-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>