Axs UI

UI Component Primitives

npm i axs-ui

In addition to the core Box and Text components, the optional axs-ui package includes several pre-styled UI component primitives.

Heading

Hello

<Heading
  fontSize={2}
  level={3}
>
  Hello
</Heading>

Flex

Box
Box
<Flex
  alignItems="center"
  flexDirection={[
    'column',
    'row'
  ]}
>
  <Box
    bgGray1
    px1
    py2
    width={[
      1,
      0.5
    ]}
  >
    Box
  </Box>
  <Box
    bgGray2
    p1
    width={[
      1,
      0.5
    ]}
  >
    Box
  </Box>
</Flex>

Button

<Button
  bg="fuschia"
  href="#Button"
>
  Button
</Button>

Label

<Label htmlFor="input">
  Label
</Label>

Input

<Box>
  <Label htmlFor="input">
    Input
  </Label>
  <Input
    defaultValue="Hello"
    id="input"
    name="input"
  />
</Box>

Select

<Box>
  <Label htmlFor="select">
    Select
  </Label>
  <Select
    defaultValue="Hello"
    id="select"
    name="select"
  >
    <option>
      Hello
    </option>
    <option>
      Two
    </option>
    <option>
      Four
    </option>
    <option>
      Eight
    </option>
  </Select>
</Box>

Textarea

<Box>
  <Label htmlFor="textarea">
    Textarea
  </Label>
  <Textarea
    defaultValue="Hello"
    id="textarea"
    name="textarea"
    rows={4}
  />
</Box>

Radio

<Box>
  <Flex
    bold
    fontSize={4}
    is="label"
  >
    <Radio
      checked
      fuschia
      id="radio-1"
      mr1
      name="radio-1"
    />
    Radio One
  </Flex>
  <Flex
    bold
    fontSize={4}
    is="label"
  >
    <Radio
      id="radio-2"
      mr1
      name="radio-2"
    />
    Radio Two
  </Flex>
</Box>

Checkbox

<Flex
  bold
  fontSize={4}
  is="label"
>
  <Checkbox
    checked
    fuschia
    id="checkbox"
    mr1
    name="checkbox"
  />
  Check it
</Flex>

Slider

<Box>
  <Label htmlFor="slider">
    Slider
  </Label>
  <Slider
    defaultValue={12.5}
    fuschia
    id="slider"
    name="slider"
  />
</Box>

Progress

25%
<Progress
  fuschia
  value={0.25}
>
  25%
</Progress>

InlineBlock

InlineBlock
<InlineBlock
  bgGray1
  p1
>
  InlineBlock
</InlineBlock>

Span

Span
<Span
  bold
  fuschia
>
  Span
</Span>