From 2bfa1c3d96862d584c122021e70132916362e869 Mon Sep 17 00:00:00 2001 From: Bartek Date: Tue, 4 Aug 2026 15:43:20 +0200 Subject: [PATCH] Add avatar upload functionality to documentation - Introduced new sections for avatar upload, including usage of the `avatar-upload` class, size variations, and text labels. - Added examples for integrating avatar uploads in forms and accessibility considerations for better user experience. --- docs/pages/ui/components/avatar.mdx | 41 +++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/docs/pages/ui/components/avatar.mdx b/docs/pages/ui/components/avatar.mdx index b13ea6f24..ffe96ae04 100644 --- a/docs/pages/ui/components/avatar.mdx +++ b/docs/pages/ui/components/avatar.mdx @@ -72,6 +72,40 @@ Change the shape of an avatar with the default Bootstrap image classes. You can AA +## Avatar upload + +Use the `avatar-upload` class together with `avatar` to show an empty avatar slot. It has a dashed border and no image, so users can see that the picture is still missing. On hover the border and the icon turn to the primary color. + +Put an icon inside to show the action. The variant is often used as a link or a button. + + + + + +## Avatar upload size + +The upload avatar uses the same size classes as a normal avatar, from `avatar-xxs` to `avatar-2xl`. + + + + + +## Avatar upload text + +Add a short label under the icon with the `avatar-upload-text` class. The content is stacked in a column, so use this only in the larger sizes. The text is shown in uppercase, like all avatar text. + + + Upload Add photo + + +## Avatar upload in a form + +To pick a real file, use a `label` with the upload classes and connect it to a hidden file input. Add `cursor-pointer`, because the pointer cursor is only set for links. + + +
Click to upload a new avatar
+ + ## Avatars list Create a list of avatars within one parent container. @@ -91,3 +125,10 @@ Make the list stack once a certain number of avatars is reached to make it look SA + +## Accessibility + +- An avatar with a background image has no text of its own. Show the user name next to it, or add an `aria-label` to the avatar. +- Give the upload avatar a clear name. Use the `avatar-upload-text` label, an `aria-label`, or a `form-label` linked with `for`. +- Use a `label` with a file input, or a `button`, when the upload avatar does something. A link with `href="#"` is only good for a static demo. +- Keep the hidden file input in the markup with the `visually-hidden` class. Do not use `display: none`, because then keyboard users cannot reach it.