InviteAccept
Who invited you, to what, and as what, with Join and Decline.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { Button, InviteAccept, Stack, Text} from '@kerf-js/veneer'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="kerf" role="Member" email="dara@kerf.dev" description={memberDescription} onAccept={() => (answer.value = 'Joined kerf.')} onDecline={() => (answer.value = 'Invite declined.') } onOtherAccount={() => {}} /> )} </> )}const memberDescription = 'Members can deploy and edit projects.'Installation
npm install @kerf-js/veneerUsage
tsx
import { InviteAccept } from '@kerf-js/veneer'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer'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 upInvite dialog