Text Type

Avatar with text.

Usecase Examples

The following example demonstrates the Avatar of type text in action.

Color

Preview

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar text='R A' type='text' color='primary'/>
        <Avatar text='R A' type='text' color='secondary'/>
        <Avatar text='R A' type='text' color='success'/>
        <Avatar text='R A' type='text' color='info'/>
        <Avatar text='R A' type='text' color='warning' />
        <Avatar text='R A' type='text' color='error'/>
        <Avatar text='R A' type='text' color='default'/>
        <Avatar text='R A' type='text' color='dark'/>
        <Avatar text='R A' type='text' color='light'/>

        <Avatar text='R A' type='text' color='crimson'/>
        <Avatar text='R A' type='text' color='#ed143d'/>
        <Avatar text='R A' type='text' color='rgb(237, 20, 61)'/>
        <Avatar text='R A' type='text' color='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

BackgroundColor

Preview

R A

R A

R A

R A

Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar text='R A' type='text' backgroundColor='crimson'/>
        <Avatar text='R A' type='text' backgroundColor='#ed143d'/>
        <Avatar text='R A' type='text' backgroundColor='rgb(237, 20, 61)'/>
        <Avatar text='R A' type='text' backgroundColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

BorderColor

Preview

R A

R A

R A

R A

Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar text='R A' type='text' borderWidth='thin' borderColor='crimson'/>
        <Avatar text='R A' type='text' borderWidth='thin' borderColor='#ed143d'/>
        <Avatar text='R A' type='text' borderWidth='thin' borderColor='rgb(237, 20, 61)'/>
        <Avatar text='R A' type='text' borderWidth='thin' borderColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

BorderWidth

Preview

R A

R A

R A

R A

R A

R A

Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar text='R A' type='text' fillMode='none' borderWidth='none'/>
        <Avatar text='R A' type='text' fillMode='none' borderWidth='hairline'/>
        <Avatar text='R A' type='text' fillMode='none' borderWidth='thin'/>
        <Avatar text='R A' type='text' fillMode='none' borderWidth='base'/>
        <Avatar text='R A' type='text' fillMode='none' borderWidth='thick'/>
        <Avatar text='R A' type='text' fillMode='none' borderWidth={2}/>
      </div>
    );
  }
}

FillMode

Preview

R A

R A

R A

Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar text='R A' type='text' color='primary' fillMode='solid' />
        <Avatar text='R A' type='text' color='primary' fillMode='none' />
        <Avatar text='R A' type='text' color='primary' fillMode='ghost' />
      </div>
    );
  }
}

Radius

Preview

R A

R A

R A

R A

R A

R A

Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar text='R A' type='text' radius='none' />
        <Avatar text='R A' type='text' radius='small' />
        <Avatar text='R A' type='text' radius='medium' />
        <Avatar text='R A' type='text' radius='large' />
        <Avatar text='R A' type='text' radius='full' />
        <Avatar text='R A' type='text' radius={15} />
      </div>
    );
  }
}

Size

Preview

R A

R A

R A

R A

Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block align-center'>
        <Avatar text='R A' type='text' size='small' />
        <Avatar text='R A' type='text' size='medium' />
        <Avatar text='R A' type='text' size='large' />
        <Avatar text='R A' type='text' size={120} />
      </div>
    );
  }
}

TextColor

Preview

R A

R A

R A

R A

Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar text='R A' type='text' textColor='crimson'/>
        <Avatar text='R A' type='text' textColor='#ed143d'/>
        <Avatar text='R A' type='text' textColor='rgb(237, 20, 61)'/>
        <Avatar text='R A' type='text' textColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

Playground

Live Editor

//Play with props to see live changes;

render(
  <Avatar text='RA'
          type='text'
          style={{fontSize: 64, color: 'crimson'}}
          size={120}
          color='default'
          borderWidth='thin'
          fillMode='ghost'
          backgroundColor='#ed143d24'
          borderColor='crimson'
  />
);

Result

Loading...