Tag

This component displays as a tag with an optional button to remove the given tag.

MonalisaUI

View full example: Tag Example

import React from 'react';
import { View } from 'react-native';
import { Tag } from 'monalisa-ui';

const Example = () => (
  <View>
    <Tag text="Base tag" />
  </View>
);

export default Example;

Configuration

Property	Default	Option	Description
text	-	string	Text to be displayed in the tag
color	#000	string	The text color
bgColor	#dfe1e6	string	Background color for the tag
iconLeft	-	element	Displays Icon to the left of text
iconRight	-	element	Displays Icon to the right of text
size	6	number	Size for the tag
style	-	-	Style for the tag

Example

• tag color and background color

import React from 'react';
import { View } from 'react-native';
import { Tag } from 'monalisa-ui';

const Example = () => (
  <View>
    <Tag text="Tag color" color="#ff0000" />
    <Tag text="Tag color and background color" color="#fff" bgColor="#000" />
  </View>
);

export default Example;

• tag icon

import React from 'react';
import { View } from 'react-native';
import { Tag } from 'monalisa-ui';

const Example = () => (
  <View>
    <Tag text="Tag icon left" iconLeft={<Icon name="github" />} />
    <Tag text="Tag icon right" iconRight={<Icon name="close" />} />
  </View>
);

export default Example;

• tag button

import React from 'react';
import { View } from 'react-native';
import { Tag } from 'monalisa-ui';

const Example = () => (
  <View>
    <Tag text="Tag button" activeOpacity={1} onPress={() => alert("Hello from Tag")} />
  </View>
);

export default Example;