skip to main content

skip to navigation sidebar

skip to context sidebar

created:1/14/2022

updated:1/14/2022

loc

50

comments

18%

passed

10

coverage

50%

VariantButton

Button with variants

Overview

Test data

select	#	text	variant	icon
	1	Cecelia Langosh	success	none
	2	Jolie Beahan Sr.	disabled	down-arrow
	3	Kane Ortiz	warning
	4	Ronny Spinka	success	right-arrow
	5	Jayce Schaden		up-arrow

5 data rows

Controls

Name	Description	Default	Controls
text	button label text string	-
variant	variant kind primaryaccentdisabledsuccesswarningerror	primary

Tests results

	Status	Full name	Title	Time(ms)
VariantButton.test.ts(10 tests)
	passed	VariantButton > overview > 1	snapshot	10
	passed	VariantButton > overview > 1	accessibility	105
	passed	VariantButton > overview > 2	snapshot	11
	passed	VariantButton > overview > 2	accessibility	60
	passed	VariantButton > overview > 3	snapshot	6
	passed	VariantButton > overview > 3	accessibility	56
	passed	VariantButton > overview > 4	snapshot	8
	passed	VariantButton > overview > 4	accessibility	61
	passed	VariantButton > overview > 5	snapshot	8

total 10 tests

Tests coverage

	Kind	Total	Covered	Skipped	%
VariantButton.tsx
	lines	7	7	0	100%
	functions	1	1	0	100%
	statements	9	9	0	100%
	branches	4	2	0	50%

impact

id

description

serious

color-contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds...

	summary	target
	Fix any of the following: Element has insufficient color contrast of 3.45 (foreground color: #f2f2f2, background color: #2f80ed, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static--height-auto.rah-static[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > button

Viewport

320px

375px

768px

1024px