Sha256: cd48e390723e3834eb01e7bb20baedbd30d40a2a9fe1e4dfce6101cba176e58d
Contents?: true
Size: 1.62 KB
Versions: 1007
Compression:
Stored size: 1.62 KB
Contents
import React from "react";
import { Avatar } from 'playbook-ui'
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
1,007 entries across 1,007 versions & 2 rubygems