Sha256: 96f7b7af4c0f5a27dbece995cc7434a4cc8351cc22efea1b68cb2d590ec8801a

Contents?: true

Size: 1.54 KB

Versions: 88

Compression:

Stored size: 1.54 KB

Contents

import React from "react";
import { Avatar } from '../..'

const AvatarCircleIconComponentOverlay = () => {
    return (
        <div>
        <Avatar
            componentOverlay={{
                component: "iconCircle",
                placement: "bottom-right",
                icon: "shield",
                variant: "royal"
            }}
            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
            marginBottom="sm"
            size="sm"
        />

        <Avatar
            componentOverlay={{
                component: "iconCircle",
                placement: "bottom-right",
                icon: "check",
                variant: "green"
            }}
            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
            marginBottom="sm"
            size="md"
        />

        <Avatar
            componentOverlay={{
                component: "iconCircle",
                placement: "top-left",
                icon: "lock",
                variant: "red"
            }}
            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
            marginBottom="sm"
            size="lg"
        />

        <Avatar
            componentOverlay={{
                component: "iconCircle",
                placement: "left-center",
                icon: "star",
                variant: "yellow"
            }}
            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
            marginBottom="sm"
            size="xl"
        /> 
    </div>
    )
}

export default AvatarCircleIconComponentOverlay

Version data entries

88 entries across 88 versions & 2 rubygems

Version Path
playbook_ui_docs-13.34.1.pre.alpha.play1407statvaluekitinconsistencies3388 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.34.1.pre.alpha.play1407statvaluekitinconsistencies3388 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui_docs-13.34.1.pre.alpha.PLAY14703378 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.34.1.pre.alpha.PLAY14703378 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui_docs-13.34.1 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.34.1 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui_docs-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3370 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3370 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui_docs-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3369 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3369 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3368 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui_docs-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3366 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3366 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.34.0 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui_docs-13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui_docs-13.33.1.pre.alpha.PLAY14063320 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.33.1.pre.alpha.PLAY14063320 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui-13.33.1 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
playbook_ui_docs-13.33.0.pre.alpha.PBNTR405dropdownformfixesrails3311 app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx