Sha256: 665543a468614d9ea37ba7055d2c2eb2af4518f77c3b8db913df2fbd1e01af19
Contents?: true
Size: 1.54 KB
Versions: 675
Compression:
Stored size: 1.54 KB
Contents
import React from "react";
import { Avatar } from 'playbook-ui'
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
675 entries across 675 versions & 2 rubygems