badge.js

/*
 * Copyright (c) 2021, salesforce.com, inc.
 * All rights reserved.
 * SPDX-License-Identifier: BSD-3-Clause
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */
import {defineRecipe} from '@chakra-ui/react'

export default defineRecipe({
    variants: {
        variant: {
            solid: {
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 'md',
                fontWeight: 'medium',
                fontSize: 'xs',
                lineHeight: '1.2',
                textTransform: 'uppercase',
                letterSpacing: 'wider'
            },
            notification: {
                display: 'inline-flex',
                justifyContent: 'center',
                position: 'absolute',
                top: 0,
                right: 0,
                minWidth: 5,
                height: 5,
                color: 'white',
                fontSize: 'xs',
                backgroundColor: 'blue.600',
                border: '1px solid',
                borderColor: 'white',
                borderRadius: 'full'
            }
        }
    }
})