<VeltWireframe>
    <VeltCommentDialogWireframe>
        {/*  Header */}
        <VeltCommentDialogWireframe.Header>
            {/*  Following subcomponents can be used outside header as well */}
            {/*  # Pin Dialog Header */}
            <VeltCommentDialogWireframe.Status />
            <VeltCommentDialogWireframe.Priority />
            <VeltCommentDialogWireframe.Options />
            <VeltCommentDialogWireframe.CopyLink />
            <VeltCommentDialogWireframe.ResolveButton />
            {/*  # Sidebar Dialog Header */}
            <VeltCommentDialogWireframe.CommentIndex />
            <VeltCommentDialogWireframe.CommentCategory />
            <VeltCommentDialogWireframe.CommentSuggestionStatus />
        </VeltCommentDialogWireframe.Header>
        {/*  Ghost Banner */}
        <VeltCommentDialogWireframe.GhostBanner />
        {/*  Private Banner */}
        <VeltCommentDialogWireframe.PrivateBanner />
        {/*  Assignee Banner */}
        <VeltCommentDialogWireframe.AssigneeBanner>
            <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
            <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
            <VeltCommentDialogWireframe.AssigneeBanner.UserName />
        </VeltCommentDialogWireframe.AssigneeBanner>
        {/* Private Badge */}
        <VeltCommentDialogWireframe.PrivateBadge/>
        {/* Body */}
        <VeltCommentDialogWireframe.Body>
            <VeltCommentDialogWireframe.Threads>
                <VeltCommentDialogWireframe.ThreadCard>
                    <VeltCommentDialogWireframe.ThreadCard.Avatar />
                    <VeltCommentDialogWireframe.ThreadCard.Name />
                    <VeltCommentDialogWireframe.ThreadCard.Time />
                    <VeltCommentDialogWireframe.ThreadCard.DeviceType />
                    <VeltCommentDialogWireframe.ThreadCard.Options />
                    <VeltCommentDialogWireframe.ThreadCard.Message />
                    <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
                    <VeltCommentDialogWireframe.ThreadCard.Reactions />
                    <VeltCommentDialogWireframe.ThreadCard.Files />
                    <VeltCommentDialogWireframe.ThreadCard.Recordings />
                </VeltCommentDialogWireframe.ThreadCard>
                <VeltCommentDialogWireframe.MoreReply />
            </VeltCommentDialogWireframe.Threads>
            <VeltCommentDialogWireframe.ToggleReply />
        </VeltCommentDialogWireframe.Body>
        {/* 7. Composer */}
        <VeltCommentDialogWireframe.Composer>
            <VeltCommentDialogWireframe.Composer.Files />
            <VeltCommentDialogWireframe.Composer.Recordings />
            <VeltCommentDialogWireframe.Composer.Input />
            <VeltCommentDialogWireframe.Composer.ActionButton type="userMentions" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="file" />
            <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>
        {/* All Comments */}
        <VeltCommentDialogWireframe.AllComment />
        {/* Approve */}
        <VeltCommentDialogWireframe.Approve />
        {/* Sign In */}
        <VeltCommentDialogWireframe.SignIn />
        {/* Upgrade */}
        <VeltCommentDialogWireframe.Upgrade />
        {/* Suggestion Action */}
        <VeltCommentDialogWireframe.SuggestionAction>
            <VeltCommentDialogWireframe.SuggestionAction.Accept />
            <VeltCommentDialogWireframe.SuggestionAction.Reject />
        </VeltCommentDialogWireframe.SuggestionAction>
    </VeltCommentDialogWireframe>
</VeltWireframe>

Rearranging the order of Subcomponents

You can change the order of how the subcomponents appear by rearranging the subcomponents in the wireframe template.

In this example, the Header subcomponent of the Comment Dialog has been moved to the top of the template.

<VeltWireframe>
    <VeltCommentDialogWireframe>
        {/* Header */}
        <VeltCommentDialogWireframe.Header>
            <VeltCommentDialogWireframe.Status />
            <VeltCommentDialogWireframe.Priority />
            <VeltCommentDialogWireframe.Options />
            <VeltCommentDialogWireframe.CopyLink />
            <VeltCommentDialogWireframe.ResolveButton />
            <VeltCommentDialogWireframe.CommentIndex />
            <VeltCommentDialogWireframe.CommentCategory />
            <VeltCommentDialogWireframe.CommentSuggestionStatus />
        </VeltCommentDialogWireframe.Header>
        {/* Ghost Banner */}
        <VeltCommentDialogWireframe.GhostBanner />
        {/* Private Banner */}
        <VeltCommentDialogWireframe.PrivateBanner />
        {/* Assignee Banner */}
        <VeltCommentDialogWireframe.AssigneeBanner>
            <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
            <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
            <VeltCommentDialogWireframe.AssigneeBanner.UserName />
        </VeltCommentDialogWireframe.AssigneeBanner>
        ...
    </VeltCommentDialogWireframe>
</VeltWireframe>