Team Members

Team members: roles, email invites, pending invitations, seat count. Pro · Work and teams › Team and documents

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add team-members

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { TeamMembers } from 'valyro-ui-pro';

Props

Prop	Type
`members`	`TeamMember[]`	Controlled `members`; use with `onMembersChange`.
`defaultMembers`	`TeamMember[]`	Initial `members` when uncontrolled.
`onMembersChange`	`(members: TeamMember[]) => void`	Called with the new `members` when it changes.
`invites`	`TeamInvite[]`	Controlled `invites`; use with `onInvitesChange`.
`defaultInvites`	`TeamInvite[]`	Initial `invites` when uncontrolled.
`onInvitesChange`	`(invites: TeamInvite[]) => void`	Called with the new `invites` when it changes.
`roles` *	`TeamRole[]`	Roles a member can have, in order.
`defaultInviteRole`	`string`	Role preselected for new invites. Defaults to the last role.
`seats`	`number \| null`	Seats on the plan; omit for unlimited. Members and pending invites both take a seat.
`currentUserId`	`string`	Id of the signed-in member: their own role and removal are locked.
`allowedDomains`	`string[]`	Only addresses on these domains can be invited (subdomains included).
`onInvite`	`(emails: string[], role: string) => unknown`	Sends invitations. May return a promise; a rejection keeps the addresses and shows the error.
`onRoleChange`	`(member: TeamMember, role: string) => void`	Called when a member's role is changed in their row, with the member (old role) and the new role value.
`onStatusChange`	`(member: TeamMember, status: 'active' \| 'suspended') => void`	Called on Suspend or Reactivate in a member's actions menu, with the member and their new status.
`onRemove`	`(member: TeamMember) => unknown`	May return a promise; the confirmation waits for it.
`onResend`	`(invite: TeamInvite) => unknown`	Called on Resend for a pending invite. May return a promise; a rejection shows its error on the row.
`onRevoke`	`(invite: TeamInvite) => unknown`	Called on Revoke for a pending invite. May return a promise; the invite leaves the list once it resolves.
`onUpgrade`	`() => void`	Shows an "Add seats" button next to the meter.
`title`	`ReactNode`	Panel heading; falls back to `labels.title` ("Members").
`description`	`ReactNode`	Text under the heading; falls back to `labels.description`.
`locale`	`string`	BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<TeamMembersLabels>`	Overrides for the built-in English text; keys left out keep their defaults.

Related components

Org Chart — Org chart: zoomable, pannable tree with search and collapsible branches
Activity Feed — Activity feed
Rich Text Editor — Text editor: Markdown shortcuts, slash commands, mentions, links and images
Calendar View — Event calendar
Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
Kanban Board — Task board
Gantt Chart — Gantt charts with dependencies and drag to reschedule
Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration

Previous: Course Path Navigator · Next: Org Chart · All Work and teams