MYDS Logo

    MYDS

    Beta

    Button

    A fundamental UI element used to trigger actions or events. It ensures consistency, accessibility, and a clear call to action.

    Usage

    import {
      Button,
      ButtonIcon,
      ButtonCounter,
    } from "@govtechmy/myds-react/button";
    export default () => (
      <Button>
        <ButtonIcon />
        <ButtonCounter />
      </Button>
    );

    Examples

    Variant

    Use the variant prop to change the button style!

    Size

    Use the size prop to change the button size!

    With Icon

    Use <ButtonIcon> to add action icon to the button.

    Icon Only

    For buttons with sole icon - set iconOnly=true & use <ButtonIcon> as the only element in the children.

    With Counter

    Use <ButtonCounter> to add numeric information to the button.

    Props

    Button

    PropTypeDefault
    variant
    enum
    default-outline
    size
    enum
    small
    iconOnly
    boolean
    false
    children
    ReactNode
    -
    className
    string
    -

    ButtonIcon

    PropTypeDefault
    children
    ReactNode
    -
    className
    string
    -

    ButtonCounter

    PropTypeDefault
    children
    ReactNode
    -
    className
    string
    -

    On this page