Components

MembersSettings

Attio's "Members and teams" settings page.

Available since@crisp-ui-kit/crisp@0.57.2

Attio's "Members and teams" settings page (crisp#636): a title + description, a Members/Teams segmented switcher, a search+Filter+Invite toolbar, and the members table (User/Role/Teams). Pair it with SettingsShell for the surrounding layout and InviteMembersDialog for the "Invite members" flow.

Installation

npm install @crisp-ui-kit/crisp

Props

Prop

Type

InviteMembersDialog

Attio's "Invite members" modal, measured live: 708px wide, a multi-email composer, an "Invite as" select (default Member) and an optional "Add to team" search-or-create select, footer "Send Invites".

Prop

Type

Notes

  • Teams is a placeholder tab. Members is the only tab with a fully built shape — Teams renders teamsContent if given, or a muted placeholder otherwise, since Attio's own Teams tab body wasn't part of this component's measurement pass. Set showTeamsTab={false} to hide the switcher entirely and always render the Members table, for a consumer with no teams concept to back a Teams tab.
  • showTeamsColumn (default true) shows the "Teams" column independently of showTeamsTab: hiding the tab no longer implies hiding the column, and vice versa.
  • learnMoreHref has no default — the "Learn more" link renders only when it is given.
  • showInviteButton (default true, Attio's own measured shape) hides the toolbar's "Invite members" button — for a consumer whose users arrive only via SSO/IMS, with no email-invite flow of its own.
  • extraColumnLabel/MemberRow.extraColumn (crisp#1007) add one consumer-specific column (e.g. an authz system's own linked-employee/department) after Attio's own three. Omitted (default), no column renders, matching Attio's own table exactly — this isn't part of its measured shape, so it only appears once a consumer opts in by setting a label.
  • MemberRow.role: "Admin" renders Attio's measured purple role badge; any other value renders as plain text (Attio's own Member role has no pill).

On this page