Avatar

@shopify/shop-minis-platform-sdk / components/Avatar

AvatarProps

Properties

color?

optional color: ResponsiveValue\<"primary-button-background" | "foregrounds-contrasting" | "unbranded-button-background" | "unbranded-button-foreground" | "tertiary-button-background" | "tertiary-button-foreground" | "blurred-button-background-a30" | "transparent" | "foregrounds-regular" | "foregrounds-primary" | "backgrounds-regular" | "outlined-button-border" | "highlights-dangerous" | "multiplier-badge-background" | "multiplier-badge-foreground" | "shop-cash-dark-button-background" | "subdued-button-background" | "subdued-button-foreground" | "shadows-soft" | "backgrounds-regular-fully-transparent" | "backgrounds-subdued" | "backgrounds-overlay" | "backgrounds-placeholder" | "backgrounds-dangerous" | "backgrounds-dangerous-subdued" | "backgrounds-success" | "backgrounds-success-subdued" | "backgrounds-primary" | "backgrounds-brand-primary" | "backgrounds-brand-secondary" | "backgrounds-sash-primary" | "backgrounds-shop-cash-secondary" | "foregrounds-secondary" | "foregrounds-subdued" | "foregrounds-placeholder" | "foregrounds-shop-cash-secondary" | "foregrounds-contrasting-inverted" | "highlights-primary" | "highlights-discounted" | "highlights-success" | "highlights-success-subdued" | "dividers-regular" | "dividers-section" | "borders-regular" | "primary-button-background-hover" | "secondary-button-background-hover" | "tertiary-button-background-hover" | "tertiary-button-disabled-outline" | "backgrounds-regular-hover" | "button-disabled-background" | "button-disabled-foreground" | "toasts-background" | "toasts-secondary" | "toasts-foreground" | "inputs-background" | "inputs-background-disabled" | "inputs-border" | "inputs-border-color" | "inputs-clear-button" | "inputs-placeholder-text" | "search-input-background" | "popover-background" | "shop-cash-offer-card-button-foreground" | "shop-cash-offer-card-button-background" | "add-a-card-icon" | "backgrounds-announcement-card" | "notification-highlight-background" | "progress-bar-completed" | "confetti-1" | "main-nav-tab-active" | "main-nav-tab-inactive" | "main-nav-tab-active-foreground" | "inactive-button-background" | "inactive-button-foreground" | "carbon-impact-asset-instagram-story-background" | "carousel-control-active" | "carousel-control-inactive" | "product-image-placeholder" | "product-image-background" | "product-image-overlay" | "checkbox-checked" | "checkbox-unchecked-border" | "checkbox-checkmark" | "backgrounds-floating-tab" | "status-icon-dimmed" | "cart-indicator" | "background-aos-webview-disclaimer-banner" | "border-loading-order-info" | "bg-loading-order-info" | "featured-merchant-image-text" | "rating-stars-background" | "rating-stars-fill" | "rating-stars-void" | "new-rating-stars-background" | "no-image-found-background" | "background-chip-1" | "background-chip-7" | "foreground-chip" | "action-label-background" | "action-label-foreground" | "curation-curator-foreground" | "dashed-border" | "badge-background-discounted" | "badge-text-light" | "cash-badge-text" | "discount-badge-text" | "discount-badge-background" | "banner-important-background" | "banner-important-foreground" | "foregrounds-discount" | "brand-badge-background" | "community-product-badge-text" | "splash-shopify-logo" | "carbon-neutral-title" | "backgrounds-message-bubble-merchant" | "logo-placeholder-background" | "price-slider-background" | "price-slider-selected-background" | "mini-viewer-shopping-bag-badge" | "mini-frame-legal-notice-text" | "category-tile-text" | "reviews-search-highlights-background" | "banner-primary-text-color" | "banner-primary-close-color" | "sheet-background" | "sheet-close-button" | "highlight" | "highlight-inverted" | "image-tint" | "image-tint-light" | "image-border" | "carbon-offset-gradient-to" | "google-logo" | "blurred-button-background-a40" | "blurred-button-background-a00" | "auto-import-hero-text" | "notification-highlight-bar" | "email-forwarding-box" | "email-forwarding-list-numbers" | "opaque-white" | "opaque-black" | "unverified-confirm-product-background" | "smart-onboarding-product-box-shadow" | "smart-onboarding-product-box-background" | "smart-onboarding-icon-background" | "tracking-info-globe-image-background" | "tracking-info-white-text" | "tracking-item-pill-background" | "tracking-item-pill-text" | "tracking-card-blurred-background" | "backgrounds-banner-prompt-primary" | "blurred-recommendation-background-android" | "blurred-recommendation-background-ios" | "shop-cash-claiming-flow-default-background" | "shop-cash-claiming-flow-transparent-dark" | "shop-cash-claiming-flow-transparent-light" | "sponsored-badge-background" | "tracker-map-fallback-background" | "drops-info-registered-background" | "drops-info-registered-border" | "drops-info-registered-text-button" | "drops-countdown-badge-green" | "drops-countdown-badge-gray" | "fixed-dark" | "fixed-light" | "fixed-dark-transparent" | "text-fixed-dark" | "bg-fill-fixed-light" | "text-fixed-light" | "bg-fill-critical" | "bg-fill-caution" | "text-caution" | "text-brand" | "text-tertiary" | "text-shadow-30" | "bg-fill-secondary", object>

The color of the border around the avatar and the title

Example

<Avatar {...} color="foregrounds-regular" />

showTitle?

optional showTitle: boolean

Boolean flag to show the title next to the Avatar image. Defaults to false.

Example

<Avatar {...} title="Hello World" showTitle />

size?

optional size: AvatarSize

The size of the avatar. Defaults to 'small'

Example

<Avatar {...} size="medium" />

source

source: undefined | number | Source

Path to the image, it can either be a URL or a local path.

Example

<Avatar {...} source={{uri: 'https://example.com/image.jpg'}} />

<Avatar {...} source={require('./image.jpeg')} />

title

title: string

Text element that is placed next to the avatar. Used for placeholder if no image is provided.

Example

<Avatar {...} title="Hello World" />

---

Avatar()

Avatar(__namedParameters): Element

Parameters

Parameter	Type
__namedParameters	AvatarProps

Returns

Element