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;

Last updated