InviteAccept

Who invited you, to what, and as what, with Join and Decline.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, InviteAccept, Stack, Text } from '@weft-js/warp'export function Workspace() {  const answer = state('')  return (    <>      {answer.value        ? <Stack gap="related" align="center"><Text>{answer.value}</Text><Button size="sm" emphasis="ghost" tone="neutral" onClick={() => (answer.value = '')}>Show it again</Button></Stack>        : <InviteAccept heading="h3" inviter="Mara Lindqvist" org="weft" role="Member" email="dara@weft.dev" description="Members can deploy and edit projects." onAccept={() => (answer.value = 'Joined weft.')} onDecline={() => (answer.value = 'Invite declined.')} onOtherAccount={() => {}} />}    </>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { InviteAccept } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`inviter`	`string`	—	Who invited them.
`org`	`string`	—	The workspace.
`role`	`string`	—	What they join as.
`email`	`unknown`	—	The invited address.
`description`	`unknown`	—	What that role can do.
`heading`	`Heading`	—	The title's level.
`pending`	`boolean`	`false`	Shows progress on Join.
`children`	`unknown`	—	What it contains.

Event	Type	Default	Description
`onAccept`	`(() => void)`	—	Joins.
`onDecline`	`(() => void)`	—	Declines.
`onOtherAccount`	`(() => void)`	—	Shows the link to use another account.
`onBack`	`(() => void)`	—	Shows Back.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="stack"] [data-part="lede"]

lederow

RelatedSign up Invite dialog