Components / data-display

Avatar Upload

Choose or change a profile picture: the picture (or the icon while there is none), an Upload photo button that opens the file picker and, once there is a picture, Remove.

import { AvatarUpload } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { AvatarUpload } from '@basiiik/ui';

<AvatarUpload onFileSelect={(file) => upload([file])} />

Example values were filled in for the required prop onFileSelect: replace them with your own.
Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
Error is the error prop (its message replaces the hint). Disabled disables both buttons and the file picker. Picture=Set is a src (or the preview of the file just chosen).
Compose with: avatar, button.
Storybook: Data display/Avatar upload.

Props

Prop	Type	Notes
`size`	`"lg" \| "xl"`	Default "xl"
`src`	`string`
`onFileSelect` required	`(file: File) => void`
`name`	`string`
`helperText`	`ReactNode`
`error`	`ReactNode`
`accept`	`string`
`maxSize`	`number`
`onFileReject`	`(file: File, reason: "type" \| "size") => void`
`onRemove`	`() => void`
`disabled`	`boolean`

Other props

Prop	Type	What it does
`buttonLabel`	`string`	Text of the main button, for translation.
`removeLabel`	`string`	Text of the remove button, for translation.
`aria-label`	`string`	Accessible name of the group. Defaults to "Profile photo".
`icon`	`ReactNode`	Fallback icon when there is no name or image.
`initials`	`string`	Override the derived initials (1 to 2 characters).

States. Error is the error prop (its message replaces the hint). Disabled disables both buttons and the file picker. Picture=Set is a src (or the preview of the file just chosen).

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

A profile or account settings page where the person can choose or change their picture
Onboarding steps that ask for a photo or a logo

Do not use it when

Uploading documents or several files (use File Upload)
A picture that cannot be changed (use Avatar)

Rules for agents

Call onFileSelect(file) to upload; the preview shows until src arrives, then src replaces it
Set accept and maxSize, and show the reason from onFileReject through error ("That file is over 2 MB.")
Pass onRemove only when removing is possible; Remove appears while there is a picture
Put the allowed types and size in helperText so nobody has to guess

Avoid

A hidden file input and a custom button around an Avatar
Rejecting a file without saying why
A drop zone for a small profile picture (use File Upload for documents)

Writing the content

Hint: the types and the size limit: "JPG or PNG, up to 2 MB"
Error: what is wrong and what to do: "That file is over 2 MB."

Keyboard

Tab moves between Upload photo and Remove
Enter and Space press the focused button (Upload photo opens the file picker)

Accessibility

A group named by aria-label ("Profile photo" by default)
The hint or error is linked to the Upload photo button with aria-describedby
The file input is hidden from assistive tech: the button is the control

Colour tokens it reads

color.text.dangercolor.text.disabledcolor.text.secondary

data-display 12 Figma variants Try it in the live demo