Avatar Action Button

import React from 'react'

import AvatarActionButton from 'playbook-ui'

const AvatarActionButtonDefault = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
    />
  </div>
)

export default AvatarActionButtonDefault

import React from 'react'

import AvatarActionButton from 'playbook-ui'

const AvatarActionButtonPlacement = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="bottom_left"
    />
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="bottom_right"
    />
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="top_left"
    />
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="top_right"
    />
  </div>
)

export default AvatarActionButtonPlacement

import React from 'react'

import AvatarActionButton from 'playbook-ui'

const AvatarActionButtonActions = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        action="add"
        imageAlt="Add Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Add Sophia Carden"
        name="Sophia Carden"
    />
    <AvatarActionButton
        action="remove"
        imageAlt="Remove Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Remove Sophia Carden"
        name="Sophia Carden"
    />
  </div>
)

export default AvatarActionButtonActions

import React from 'react'

import AvatarActionButton from 'playbook-ui'

const AvatarActionButtonOnClick = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Alert Sophia Carden"
        linkUrl="https://www.google.com"
        name="Sophia Carden"
        onClick={() => alert('clicked!')}
    />
  </div>
)

export default AvatarActionButtonOnClick