Sha256: 7822d76483e22f0be23c8a086050c4f0ece3e5d2ca79a840b9ea39c82c83a07d

Contents?: true

Size: 1.62 KB

Versions: 88

Compression:

Stored size: 1.62 KB

Contents

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

const AvatarBadgeComponentOverlay = () => {
    return (
        <div>
            <Avatar
                componentOverlay={{
                    component: "badge",
                    placement: "bottom-right",
                    text: "12"
                }}
                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                marginBottom="sm"
                size="sm"
            />

            <Avatar
                componentOverlay={{
                    component: "badge",
                    placement: "top-left",
                    text: "12"
                }}
                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                marginBottom="sm"
                size="md"
            />

            <Avatar
                componentOverlay={{
                    component: "badge",
                    placement: "top-center",
                    text: "On Roadtip",
                    variant: "info"
                }}
                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                marginBottom="sm"
                size="lg"
            />

            <Avatar
                componentOverlay={{
                    component: "badge",
                    placement: "bottom-center",
                    text: "Out of Office",
                    variant: "error"
                }}
                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                marginBottom="sm"
                size="xl"
            /> 
        </div>
    )
}

export default AvatarBadgeComponentOverlay

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_badge_component_overlay.jsx
playbook_ui-13.34.1.pre.alpha.play1407statvaluekitinconsistencies3388 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui_docs-13.34.1.pre.alpha.PLAY14703378 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui-13.34.1.pre.alpha.PLAY14703378 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui_docs-13.34.1 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui-13.34.1 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui_docs-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3370 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3370 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui_docs-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3369 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3369 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3368 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui_docs-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3366 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3366 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui-13.34.0 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui_docs-13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui-13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui_docs-13.33.1.pre.alpha.PLAY14063320 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui-13.33.1.pre.alpha.PLAY14063320 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui-13.33.1 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
playbook_ui_docs-13.33.0.pre.alpha.PBNTR405dropdownformfixesrails3311 app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx