MemberRow
Who gets the alerts (Figma "Member Row" 2060:10196, Settings › Família): owner, accepted co-guardian, pending invite and expired invite, the badge word carrying the state.
One surface with dividers; put rows in a <ul>.
<MemberRow role="pending" name="Carla" meta="Sua irmã · carla@exemplo.com.br" avatarInitials="CA" roleLabel="Convite pendente" actions={<Button variant="outline" size="44" aria-label="Reenviar convite pra Carla">Reenviar</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Member Row
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Role · Owner
| Member Row |
|---|
Mariana Alves (você) Dona da contamariana@exemplo.com.br · avisos da Lia e da Helena |
Role · Co-guardian
| Member Row |
|---|
Rafael Seu marido · rafael@exemplo.com.br · avisos da Lia e da Helena |
Role · Pending invite
| Member Row |
|---|
Carla Convite pendenteSua irmã · carla@exemplo.com.br · convite enviado em 26/11, vale até 03/12 |
Role · Expired invite
| Member Row |
|---|
Carla Convite vencidoSua irmã · carla@exemplo.com.br · o convite venceu em 03/12 |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| role? | MemberRole | "owner" | |
| name | string | — | Name ("Mariana Alves (você)", "Rafael"). |
| meta | string | — | Relationship · e-mail · what they receive, or the invite dates. |
| avatarInitials | string | — | Initials; the owner gets the brand avatar, everyone else neutral. |
| roleLabel? | string | — | Badge words ("Dona da conta", "Convite pendente", "Convite vencido"). Co-guardian has no badge. |
| actions? | ReactNode | — | 44 px Buttons: Reenviar / Cancelar convite, Mandar de novo / Remover. Remover stays ghost here (red only in the confirm dialog) and every aria-label carries the name ("Remover Rafael"). |
| showDivider? | boolean | true | Figma `showDivider`: off for the last row. |
| className? | string | — |