Loader

Result

Loading...

Live Editor

<Loader/>

Props

CSS Variables

Root

Variable	Value
--tipTop-Badge__borderWidth	1px
--tipTop-Badge__borderRadius	var(--tipTop__borderRadius--normal)
--tipTop-Badge__fontSize	var(--tipTop__fontSize--sm)
--tipTop-Badge__fontWeight	var(--tipTop__fontWeight--medium)
--tipTop-Badge__lineHeight	1
--tipTop-Badge__minHeight	1.25rem
--tipTop-Badge__minWidth	1.25rem
--tipTop-Badge__paddingBlock	var(--tipTop__space--1)
--tipTop-Badge__paddingInline	var(--tipTop__space--2)
--tipTop-Badge__display	inline-flex
--tipTop-Badge__alignItems	center
--tipTop-Badge__justifyContent	center
--tipTop-Badge__gap	var(--tipTop__space--1)
--tipTop-Badge__transition	background-color 0.15s ease-in-out, color 0.15s ease-in-out
--tipTop-Badge__textAlign	center
--tipTop-Badge__whiteSpace	nowrap

Show Outline

Variable	Value
--tipTop-Badge--showOutline__boxShadow	0 0 0 2px #fff

Position

Variable	Value
--tipTop-Badge--position__position	absolute
--tipTop-Badge--position__zIndex	10
--tipTop-Badge--position__transform	translate(50%, -50%)

Variants

faded

change the background color

Variable	Value
--tipTop-Badge--faded__bgColorMix-colorSpace	srgb
--tipTop-Badge--faded__bgColorMix-percent	20%
--tipTop-Badge--faded__bgColorMix-blendColor	#fff

Darken the text color over a faded background

Variable	Value
--tipTop-Badge--faded__textColorMix-colorSpace	srgb
--tipTop-Badge--faded__textColorMix-percent	65%
--tipTop-Badge--faded__textColorMix-blendColor	#000

Slot

Variable	Value
--tipTop-Badge-slot__display	inline-flex
--tipTop-Badge-slot__alignItems	center
--tipTop-Badge-slot__justifyContent	center

Slot Start

Variable	Value
--tipTop-Badge-slotStart__marginInlineEnd	var(--tipTop__space--1)

Slot End

Variable	Value
--tipTop-Badge-slotEnd__marginInlineStart	var(--tipTop__space--1)

Children

Variable	Value
--tipTop-Badge-children__display	inline-flex
--tipTop-Badge-children__alignItems	center
--tipTop-Badge-children__justifyContent	center