Helios

An accessible design system—wrapping basic UI elements.

Color

F

1.00

F

1.13

F

2.48

AA Large

3.92

AA

6.17

AAA

14.59

F

1.31

F

2.07

AA Large

3.40

AA

5.12

AAA

9.09

F

1.11

F

1.23

F

1.46

F

2.27

AA

5.68

F

1.10

F

1.40

F

1.99

AA Large

3.14

AAA

7.41

F

1.27

F

1.82

F

2.76

AA

4.91

AAA

11.59

Name

Type

Required

defaultValue

background

string
yes
-

hex

string
yes
-

isVerbose

bool
-
false

name

string
yes
-

Button

Name

Type

Required

defaultValue

className

string
-
-

isActive

bool
-
false

isDisabled

bool
-
false

isLoading

bool
-
false

isRounded

bool
-
null

isSmall

bool
-
false

onClick

func
-
function (){return null}

type

oneOf: primary, secondary
-
primary

value

string
yes
""

ButtonGroup

Name

Type

Required

defaultValue

children

node
yes
-

Checkbox

Name

Type

Required

defaultValue

onChange

func
yes
function (){return null}

className

string
-
-

isChecked

bool
-
false

isDisabled

bool
-
false

label

string
yes
""

Toggle

Name

Type

Required

defaultValue

onChange

func
yes
function (){return null}

className

string
-
-

isChecked

bool
-
false

isDisabled

bool
-
false

label

string
yes
""

Radio

Name

Type

Required

defaultValue

className

string
-
-

isDisabled

bool
-
false

label

string
-
""

onBlur

func
-
function (){return null}

onChange

func
yes
function (){return null}

state

oneOfType
-
false

value

oneOfType
-
""

Range

140

Name

Type

Required

defaultValue

className

string
-
-

isVerbose

bool
-
false

max

number
yes
100

min

number
yes
0

onChange

func
yes
function (){return null}

step

number
-
null

value

number
-
0

Progress

Name

Type

Required

defaultValue

className

string
-
-

max

number
-
100

value

number
yes
0

Input

Name

Type

Required

defaultValue

className

string
-
-

onBlur

func
-
function (){return null}

onChange

func
yes
function (){return null}

label

string
-
-

placeholder

string
-
""

type

string
-
text

value

string
-
""

Label

Default
Primary
Green
Yellow
Red
Blue

Name

Type

Required

defaultValue

color

oneOf: primary, green, red, yellow, blue
-
null

label

string
yes
""

Loading

Name

Type

Required

defaultValue

className

string
-
-

color

string
-
var(--color-gray-300)

size

number
-
20

Tooltip

Label text
Label text

Name

Type

Required

defaultValue

children

oneOfType
yes
-

className

string
-
-

text

string
yes
-

Type

Deep blue.

All their equipment and instruments are alive.

I watched the storm, so beautiful yet terrific.

A shining crescent far beneath the flying vessel.

It was going to be a lonely trip back.

Silver mist suffused the deck of the ship.

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

Small

On gaining the summit we found ourselves at the brim of a spacious hollow or basin, which in past ages must have been the crater of the volcanic peak. The grassy slopes of the basinwere laid out in flower gardens and terraces of coloured marbles, shaded with sombre trees, and ornamented with sculpture. In the bottom lay an oval sheet of water a mile long or more,and from the midst of it, towards the near end, a beautiful islet, crowned by a magnificent temple, rose like a mirage to the view, and seemed to float on its glassy bosom.

React.CreateElement()new Link as A