Button

Default

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  text: "Save and continue"
}} />

Disabled

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  text: "Disabled button",
  disabled: true
}} />

Link

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  text: "Link button",
  href: "/"
}} />

Start

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  text: "Start now button",
  isStartButton: true
}} />

Start link

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  text: "Start now link button",
  href: "/",
  isStartButton: true
}} />

Input

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  element: "input",
  name: "start-now",
  text: "Start now"
}} />

Input disabled

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  element: "input",
  text: "Explicit input button disabled",
  disabled: true
}} />

Prevent double click

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  text: "Submit",
  preventDoubleClick: true
}} />

With active state

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "active",
  text: "Active",
  classes: ":active"
}} />

With hover state

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "hover",
  text: "Hovered",
  classes: ":hover"
}} />

With focus state

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "focus",
  text: "Focussed",
  classes: ":focus"
}} />

Secondary

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "secondary",
  text: "Secondary button",
  classes: "govuk-button--secondary"
}} />

Secondary disabled

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "secondary",
  text: "Secondary button disabled",
  classes: "govuk-button--secondary",
  disabled: true
}} />

Secondary link

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "secondary",
  text: "Secondary button",
  href: "/",
  classes: "govuk-button--secondary"
}} />

Warning

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "Warning",
  text: "Warning button",
  classes: "govuk-button--warning"
}} />

Warning disabled

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "warning",
  text: "Warning button disabled",
  classes: "govuk-button--warning",
  disabled: true
}} />

Warning link

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "Warning",
  text: "Warning button",
  href: "/",
  classes: "govuk-button--warning"
}} />

Inverse

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "Inverse",
  text: "Inverse button",
  classes: "govuk-button--inverse"
}} />

Inverse disabled

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "Inverse",
  text: "Inverse button disabled",
  classes: "govuk-button--inverse",
  disabled: true
}} />

Inverse link

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "Inverse",
  text: "Inverse button",
  href: "/",
  classes: "govuk-button--inverse"
}} />

Inverse start

Svelte code

<script>
	import { Button } from '@danboscaro/govuk-svelte'
</script>

<Button {...{
  name: "Inverse",
  text: "Inverse start button",
  href: "/",
  classes: "govuk-button--inverse",
  isStartButton: true
}} />