V99Tag

I. Props

Tags props

Name	Type	Default	Description
id	string	false	The ID of the Tag.
type	'filled' | 'outline' | 'filled-dark' | 'outline-dark'	filled	The type of the Tag. Default value is filled.
textPrimary	boolean	-	Show text color primary900.
textSize	'large' | 'medium' | 'small' | 'auto'	large	The size text of Tag. Default value is large.
children	React.ReactNode	-	Add children for Tag
onPress	(id?: string) => void	-	Handler to be called when the user taps the Tag.

TagToken props

Name	Type	Default	Description
id	string	false	The ID of the Tag.
iconName	IconCDNType	filled	The icon name of the Token.
name	string	-	Token name.
chain	string	-	The net chain of Token.
onPress	(id?: string) => void	-	Handler to be called when the user taps the Tag.

II. Usage

import { V99Tags, V99TagToken } from 'v99-kits'

III. Tags type & TagToken

• Tag filled
• Tag outline
• Tag filled-dark
• Tag small
• Tag token

1. Tag filled

Example

        <V99Box paddingHorizontal={V99Spacing.s16} paddingTop={V99Spacing.s20}>
            <V99Text T1 marginVertical={V99Spacing.s16}>
                Tag filled
            </V99Text>
            <V99Row>
                <V99Tags
                    id={'ApeSwap'}
                    text={'ApeSwap'}
                    type={'filled'}
                />
            </V99Row>
        </V99Box>

Demo

2. Tag outline

Example

        <V99Box paddingHorizontal={V99Spacing.s16} paddingTop={V99Spacing.s20}>
            <V99Text T1 marginVertical={V99Spacing.s16}>
                Tag outline
            </V99Text>
            <V99Row>
                <V99Tags
                    id={'Thena'}
                    text={'Thena'}
                    type={'outline'}
                    textSize={'large'}
                />
            </V99Row>
        </V99Box>

Demo

3. Tag filled dark

Example

        <V99Box paddingHorizontal={V99Spacing.s16} paddingTop={V99Spacing.s20}>
            <V99Text T1 marginVertical={V99Spacing.s16}>
                Tag filled-dark
            </V99Text>
            <V99Row>
                <V99Tags
                    id={'Dodoex'}
                    text={'Dodoex'}
                    type={'filled-dark'}
                    textSize={'medium'}
                />
            </V99Row>
        </V99Box>

Demo

4. Tag small

Example

        <V99Box paddingHorizontal={V99Spacing.s16} paddingTop={V99Spacing.s20}>
            <V99Text T1 marginVertical={V99Spacing.s16}>
                Tag small
            </V99Text>
            <V99Row>
                <V99Tags
                    id={'UniSwap'}
                    text={'UniSwap'}
                    type={'outline-dark'}
                    textSize={'small'}
                />
            </V99Row>
        </V99Box>

Demo

5. Tag token

Example

        <V99Box paddingHorizontal={V99Spacing.s16} paddingTop={V99Spacing.s20}>
            <V99Text T1 marginVertical={V99Spacing.s16}>
                Tag token
            </V99Text>
            <V99Box row flexWrap={'wrap'} marginTop={V99Spacing.s12}>
                <V99TagToken
                    id={'VNDT'}
                    iconName={'symbol_coinv'}
                    name={'VNDT'}
                    chain={'ERC20'}
                    onPress={id => setTagId(id)}
                />
                <V99Box width={20} />
                <V99TagToken
                    id={'USDT'}
                    iconName={'coin_ic_usdt'}
                    name={'USDT'}
                    chain={'BEP20'}
                    onPress={id => setTagId(id)}
                />
            </V99Box>
        </V99Box>

Demo