<VeltWireframe>
    <VeltCommentDialogWireframe.Composer>
        <VeltCommentDialogWireframe.Composer.PrivateBadge />
        <VeltCommentDialogWireframe.Composer.Avatar /> {/* used for inline comments */}
        <VeltCommentDialogWireframe.Composer.Attachments>
            ... customizable
        </VeltCommentDialogWireframe.Composer.Attachments>
        <VeltCommentDialogWireframe.Composer.Recordings />
        <VeltCommentDialogWireframe.Composer.Input placeholder='Custom Placeholder' />
        <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" /> {/* used for @mentions */}
        <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" /> {/* used for custom hotkey lists. The # is just an example. Whatever you use as the hotkey in the API should be used here as well. */}
        <VeltCommentDialogWireframe.Composer.ActionButton type="attachments" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
        <VeltCommentDialogWireframe.Composer.AssignUser />
    </VeltCommentDialogWireframe.Composer>
</VeltWireframe>

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

When the composer is in focus, a dynamic CSS class velt-composer-focused is added to the composer container.

​
Default Subcomponent

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer>
        <VeltCommentDialogWireframe.Composer.PrivateBadge />
        <VeltCommentDialogWireframe.Composer.Avatar /> {/* used for inline comments */}
        <VeltCommentDialogWireframe.Composer.Attachments>
            ... customizable
        </VeltCommentDialogWireframe.Composer.Attachments>
        <VeltCommentDialogWireframe.Composer.Recordings />
        <VeltCommentDialogWireframe.Composer.Input placeholder='Custom Placeholder' />
        <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" /> {/* used for @mentions */}
        <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" /> {/* used for custom hotkey lists. The # is just an example. Whatever you use as the hotkey in the API should be used here as well. */}
        <VeltCommentDialogWireframe.Composer.ActionButton type="attachments" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
        <VeltCommentDialogWireframe.Composer.AssignUser />
    </VeltCommentDialogWireframe.Composer>
</VeltWireframe>