Profile Image

<wa-profile-image>

Experimental

added

Displays an editable profile image with an image picker and square crop workflow.

<wa-profile-image
  image="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=300&q=80"
  label="Profile image"
></wa-profile-image>

Examples

Link to This Section

Handle the saved image

Link to This Section

The component emits a native change event after the crop is saved. Read the resulting Blob from value.

<wa-profile-image id="profile-image-example" initials="RH" label="Profile image"></wa-profile-image>
<p id="profile-image-result"></p>

<script>
  const profileImage = document.querySelector('#profile-image-example');
  const result = document.querySelector('#profile-image-result');

  profileImage.addEventListener('change', () => {
    result.textContent = `${profileImage.value.size} byte image ready to upload`;
  });
</script>

Labels

Link to This Section

Use label for the picker and avatar's accessible name. The crop dialog and confirmation button have separate visible labels.

<wa-profile-image
  initials="YM"
  label="Company profile image"
  crop-label="Adjust company image"
  confirm-label="Apply image"
></wa-profile-image>

Sizes

Link to This Section

Use Web Awesome's s, m, and l size values.

<div style="display: flex; align-items: center; gap: var(--wa-space-l);">
  <wa-profile-image size="s" initials="S" label="Small profile image"></wa-profile-image>
  <wa-profile-image size="m" initials="M" label="Medium profile image"></wa-profile-image>
  <wa-profile-image size="l" initials="L" label="Large profile image"></wa-profile-image>
</div>

Accepted image types

Link to This Section

Use accept with the same syntax as a native file input.

<wa-profile-image accept="image/jpeg,image/png,image/webp" label="Profile image"></wa-profile-image>

Notes

Link to This Section

The default accepted formats are JPEG and PNG.
The saved crop is a square 560 × 560 image blob.
Override --size for a custom avatar size and --cropper-size for a custom crop surface.
Use disabled when the current image must remain visible without allowing replacement.

API

Link to This Section

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/profile-image/profile-image.js';

After installing Web Awesome via npm, import this component:

import '@yoummday/webawesome/dist/components/profile-image/profile-image.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/profile-image/profile-image.js';

To import this component for React 18 or below, use the following code:

import WaProfileImage from '@yoummday/webawesome/dist/react/profile-image/index.js';

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`accept` `accept`	Accepted image extensions or MIME types. Type `string` Default `'.jpg,.jpeg,.png,image/jpeg,image/png'`
`confirmLabel` `confirm-label`	The label for the button that saves the crop. Type `string` Default `'Save'`
`cropLabel` `crop-label`	The crop dialog's accessible label. Type `string` Default `'Crop image'`
`disabled` `disabled`	Disables image selection. Type `boolean` Default `false`
`image` `image`	The current image URL. Type `string` Default `''`
`initials` `initials`	Initials shown when no image is available. Type `string` Default `''`
`label` `label`	The avatar's accessible label. Type `string` Default `'Choose profile image'`
`size` `size`	The profile image size preset. Type `'s' \| 'm' \| 'l'` Default `'m'`
`value`	The most recently saved cropped image. Type `Blob \| null` Default `null`

Events

Link to This Section

Learn more about events.

Name	Description
`change`	Emitted when a cropped image is saved. Read the resulting `Blob` from `event.target.value`.

CSS Custom Properties

Link to This Section

Learn more about CSS custom properties.

Name	Description
`--cropper-size`	The preferred width and height of the crop surface. Default `28rem`
`--size`	The width and height of the profile image. Default `7.5rem`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`avatar`	The current avatar.	`::part(avatar)`
`confirm-button`	The button that saves the crop.	`::part(confirm-button)`
`cropper`	The square crop surface.	`::part(cropper)`
`dialog`	The crop dialog.	`::part(dialog)`
`file-upload`	The image picker.	`::part(file-upload)`
`profile-image`	The component's outer wrapper.	`::part(profile-image)`
`base`	An alias for the component's outer wrapper.	`::part(base)`

Dependencies

Link to This Section

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Need a hand?

Report a bug

Ask for help

Profile Image

Examples

Handle the saved image

Labels

Sizes

Accepted image types

Notes

API

Importing

Attributes & Properties

Events

CSS Custom Properties

CSS Parts

Dependencies

Quick Links

Recent Searches