Usage

Basic

Simply import the component & use it, like below!

Basic Button

import { Button } from "@govtechmy/myds-react/button";
 
<Button variant="primary-fill" size="small" onClick={...}>
  Jana Pantun
</Button>;

Make sure to refer each Component's API to find out what is available.

MYDS components are built with composition in-mind. Composition offers customization at the lowest level, giving developers the highest level of freedom to add their own twist to MYDS. At the same time, this technique also allows for achieving the opposite extreme by overriding props to apply designated classes or event listeners.

A. Replace parent component

Scroll to title

Anchor masked as Button

import { Button } from "@govtechmy/myds-react/button";
import { Link } from "@govtechmy/myds-react/link";
 
<Button variant="primary-ghost" size="small" asChild>
  <Link href="#composition">
    <span className="text-txt-primary">Scroll to title</span>
  </Link>
</Button>;

B. Override props

Button with Overidden Icon Props

import { Button, ButtonIcon } from "@govtechmy/myds-react/button";
import { ArrowForwardIcon } from "@govtechmy/myds-react/icon";
 
<Button variant="primary-fill" size="small" onClick={...}>
  Jana Pantun
  <ButtonIcon>
    <ArrowForward />
  </ButtonIcon>
</Button>;

This may be a new concept to some developers, however, it very much worth mastering. Composition is a powerful technique and offers immense value when building components.

Usage

Basic

Composition

A. Replace parent component

B. Override props

On this page