render (h, { data, props, listeners, ...rest }) {
    // Event listeners
    const nonNativeEvents = {
      click: (e) => {
        const emitClick = listeners.click
        if (emitClick) {
          emitClick(e)
        }
      }
    }
    const { native, nonNative } = extractListeners({ listeners }, nonNativeEvents)

    return h(CPseudoBox, {
      ...rest,
      props: {
        as: 'button'
      },
      on: nonNative,
      nativeOn: native,
      attrs: {
        ...data.attrs,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        transition: 'all 0.2s',
        rounded: 'full',
        size: '1.25rem',
        outline: 'none',
        opacity: '0.5',
        mr: -1,
        _disabled: {
          opacity: '0.4',
          cursor: 'not-allowed',
          boxShadow: 'none'
        },
        _focus: {
          boxShadow: 'outline',
          bg: 'rgba(0, 0, 0, 0.14)'
        },
        _hover: {
          opacity: '0.8'
        },
        _active: {
          opacity: '1'
        },
        disabled: props.isDisabled,
        'data-chakra-component': 'CTagCloseButton'
      }
    }, [
      h(CIcon, {
        props: {
          size: '18px',
          name: 'small-close'
        },
        attrs: {
          focusable: false
        }
      })
    ])
  }
CTagCloseButton component

the close button for the tag

@extends CPseudoBox
@see Docs https://vue.chakra-ui.com/tabs