Button

<button id="button" class="gi-btn gi-btn-primary gi-btn-regular">Primary Button</button>

{{ govieButton({
  "content": 'Primary Button'
}) }}

import { Button } from '@govie-ds/react';

<Button>Primary Button</Button>

<button id="button" class="gi-btn gi-btn-secondary gi-btn-regular">Secondary Button</button>

{{ govieButton({
  "content": 'Secondary Button',
  "variant": 'secondary'
}) }}

import { Button } from '@govie-ds/react';

<Button variant="secondary">Secondary Button</Button>

<button id="button" class="gi-btn gi-btn-flat gi-btn-regular">Flat Button</button>

{{ govieButton({
  "content": 'Flat Button',
  "variant": 'flat'
}) }}

import { Button } from '@govie-ds/react';

<Button variant="flat">Flat Button</Button>

<button id="button" class="gi-btn gi-btn-secondary gi-btn-regular">
  <svg class="govie-button__icon-left" width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M14 8.5H8V14.5H6V8.5H0V6.5H6V0.5H8V6.5H14V8.5Z" fill="white"></path>
  </svg> button
</button>

{{ govieButton({
  "content": govieIcon({"icon": "thumb_up"}) + 'button'
}) }}

import { Button, Icon } from '@govie-ds/react';

<Button>
  <Icon icon="thumb_up" />
  button
</Button>

Not available

{{ govieButton({
  "content": govieIcon({"icon": "thumb_up"})
}) }}

import { Button, Icon } from '@govie-ds/react';

<Button>
  <Icon icon="thumb_up" />
</Button>

<button id="button" data-module="govie-button" disabled="true" aria-disabled="true" class="gi-btn gi-btn-regular gi-btn-primary-disabled">Disabled button</button>

{{ govieButton({
  "content": 'Disabled Button',
  "disabled": true
}) }}

import { Button } from '@govie-ds/react';

<Button disabled={true}>
  Disabled Button
</Button>

<button class="gi-btn gi-btn-primary-dark gi-btn-regular">Primary Dark</button>

{{ govieButton({
  "content": 'Dark Button',
  "appearance": 'light'
}) }}

import { Button } from '@govie-ds/react';

<Button appearance="light">
  Dark Button
</Button>