For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Log inSign up
Support
GuidesReferenceClick-to-Call
GuidesReferenceClick-to-Call
  • Core
    • Overview
  • Entities
    • SignalWire
    • Address
    • Participant
    • ClientPreferences
    • SelfCapabilities
    • SelfParticipant
    • User
    • WebRTCCall
  • Web Components
    • Overview
    • sw-audio-level
    • sw-call-controls
    • sw-call-dialpad
    • sw-call-media
    • sw-call-provider
    • sw-call-status
    • sw-call-widget
    • sw-click-to-call
    • sw-device-selector
    • sw-directory
    • sw-local-camera
    • sw-participant-controls
    • sw-participants
    • sw-self-media
    • sw-ui-alert
    • sw-ui-background
    • sw-ui-call-layout
    • sw-ui-content-drawer
    • sw-ui-control-bar
    • sw-ui-dialpad
    • sw-ui-dropup
    • sw-ui-icon
    • sw-ui-modal
    • sw-ui-responsive-container
    • sw-ui-split-button
    • sw-ui-transcript-view
LogoLogoSignalWire Docs
Log inSign up
Support
On this page
  • class: SwDirectory, sw-directory
  • Fields
  • directory
  • Attributes
  • CSS Properties
  • CSS Parts
  • Events
Web Components

sw-directory

|View as Markdown|Open in Claude|
Was this page helpful?
Edit this page
Previous

sw-local-camera

Next
Built with

Searchable, paginated contact list bound to a DirectoryService.

1<sw-directory></sw-directory>

Displays the live addresses$ observable from a directory service as a scrollable list with a built-in search input. Each row is selectable and exposes per-channel call buttons (audio / video / messaging) when the corresponding channel is advertised by the address. The list also surfaces the service’s loading$ and hasMore$ observables and calls loadMore() (when available) for infinite-scroll pagination.

Class: SwDirectory · Module: packages/web-components/src/components/sw-directory.ts

class: SwDirectory, sw-directory

Fields

directory
DirectoryService | nullDefaults to null

Directory service with addresses$ observable

Attributes

NameFieldInherited From
directorydirectory

CSS Properties

NameDefaultDescription
--interactive-button-primary-bg#044ef4Primary brand color.
--interactive-button-primary-hover#0342cfPrimary color on hover.
--interactive-status-success#22c55eSuccess / positive color.
--fg-default#f0f0f4Primary text color.
--fg-muted#a0a0aaSecondary / muted text color.
--bg-surface#181a28Component background color.
--bg-surface-raised#222436Background on hover.
--interactive-dropdown-hover#333338Background on active/press.
--border-defaultrgba(255,255,255,0.12)Border color.

CSS Parts

NameDescription
containerOuter flex container.
searchSearch-input row at the top of the list.
listThe scrollable list of addresses.
itemOne row in the list.
item-selectedA row when it is selected.
actionPer-row call button (audio / video / messaging).

Events

NameDetailDescription
sw-address-select—The user clicked a row.
sw-dial—The user clicked a per-channel call button.