## Feature Examples ### Shape - description: Control the form of the avatar with a shape prop. It supports 2 shapes:
 - `circle` (default) - use it to represent a user.
 - `square` - use it to represent an entity such as a company or organization.
- example: ```jsx ; ``` ### Content states - description: Component has 3 states:
 - Loads image when image URL is provided.
 - Falls back to the placeholder when provided image URL is broken or not given.
 - Display initials when image URL is broken or not given, but avatar name is defined. - example: ```jsx ; ``` ### Size - description: Adjust the avatar size using size prop. It supports 8 sizes:
 - `size90`
 - `size72`
 - `size60`
 - `size48` (default)
 - `size36`
 - `size30`
 - `size24`
 - `size18`
- example: ```jsx ; ``` ### Color - description:

Control avatar color with color prop. It supports 6 colors:

  •  A1 blue
  •  A2 arctic blue
  •  A3 purple
  •  A4 green
  •  A5 magenta
  •  A6 yellow
    • - example: ```jsx ; ``` ### Presence - description: Use the presence prop to indicate the status of a user. It supports 3 statuses:
     - `online` - indicates that user is online.
     - `offline` - indicates that user is not available.
     - `busy` - indicates that user is online, but is busy, so might not be accessible.
    - example: ```jsx ; ``` ### Placeholder - description: Display a placeholder when component has no image and no name. When required, override default placeholders to any custom elements by passing required content to `placeholder` prop. - example: ```jsx } /> ; ``` ### Indication - description: Render any indicator via `customIndication` prop. It accepts any component or a set of them within a restricted dimensions:
     - 30x30px container for avatar in `size90`, `size72`.
     - 24x24px container for avatar in `size60`, `size48`.
    Smaller avatar sizes cannot have custom indicators. - example: ```jsx () => { const CustomIndication = () => ( ); return ( } /> } /> } /> } /> ); }; ``` ### Action button - description: Render related action such as image upload as an icon button with `indication` prop. This prop applies for 4 largest avatar sizes only: size90, size72, size60 and size48. - example: ```jsx } /> } /> } /> } /> ; ``` ### Show action on hover - description: Reveal action button on avatar hover only with `showIndicationOnHover` prop. - example: ```jsx } showIndicationOnHover /> } showIndicationOnHover /> } showIndicationOnHover /> } showIndicationOnHover /> ; ``` ### Loader - description: Render related action such as image upload as an icon button with `indication` prop. This prop applies for 4 largest avatar sizes only: size90, size72, size60 and size48. - example: ```jsx } loading /> } loading /> } loading /> } loading /> ; ``` ## Common Use Case Examples ### Users list - description: Use \ as a first data column in a table to visually represent your customers. - example: ```jsx () => { const records = [ { image: , name: 'Sara Porter', country: 'Canada', orders: 2, lastActivity: 'Sep 9, 2020', }, { image: , name: 'Michael Baldwin', country: 'Germany', orders: 43, lastActivity: 'Sep 7, 2020', }, { image: , name: 'Alex Halifax', country: 'United Kingdom', orders: 12, lastActivity: 'Jun 30, 2020', }, { image: , name: 'Paul Sheffield', country: 'US', orders: 0, lastActivity: 'Sep 18, 2019', }, ]; const columns = [ { title: '', width: '36px', render: row => row.image }, { title: 'Name', render: row => row.name }, { title: 'Country', render: row => row.country }, { title: 'Orders', render: row => row.orders }, { title: 'Last Activity', render: row => row.lastActivity }, { render: () => ( {}, }} /> ), }, ]; return ( Customers
    ); }; ``` ### Prefix - description: Use \ as a prefix item to build user selections. - example: ```jsx option.value({ selected: option.id }).props.title} fixedFooter={} options={[ listItemSelectBuilder({ id: 0, prefix: , title: 'Carmel Lloyd', }), listItemSelectBuilder({ id: 1, prefix: , title: 'Gracie-May Marsden', }), listItemSelectBuilder({ id: 2, prefix: , title: 'Keisha Decker', }), listItemSelectBuilder({ id: 3, prefix: , title: 'Ruairidh Fitzgerald', }), listItemSelectBuilder({ id: 4, prefix: , title: 'Sheldon Chavez', }), ]} />; ``` ### Upload photo - description: Use an `indication` prop to display a button allowing users to manually upload a photo to avatar - example: ```jsx {({ openFileUploadDialog }) => ( } /> )} Anne Rikki Edit Contact Email anne.rikki@email.com Phone +44 734 349973 Billing Address 2549 Perine Street, Vermont ; ```