Usage

Basic

Simply import the component & use it, like below!

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.

Composition

MYDS components are built with composition in-mind. Composition offers customization at the lowest level, giving developers the highest level of freedom to implement their own logic on MYDS components.

Take a look at some of the following examples below:

A. Replace parent component

This example demonstrates how to override props to apply designated classes or event listeners through asChild.

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>;

As a result, the <Link> inherits the style of the <Button> component while still functioning as a <Link>!

B. Override props

This example demonstrates how a parent component can override the child component's props by acting like a wrapper.

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>;

In this case, the <ButtonIcon> component applies the necessary CSS to <ArrowForward /> icon to make it compliant with the <Button> component & the variant chosen.