Button #

<cdx-button>Click me</cdx-button>

<cdx-button action="progressive">Click me</cdx-button>

<cdx-button action="destructive" type="primary">Click me</cdx-button>

<cdx-button action="destructive" type="primary" :disabled="true">
	Click me
</cdx-button>

<cdx-button type="quiet">Click me</cdx-button>

<template>
	<cdx-button>
		<cdx-icon :icon="cdxIconArrowPrevious" /> Go back
	</cdx-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxButton, CdxIcon } from '@wikimedia/codex';
import { cdxIconArrowPrevious } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'ButtonWithIcon',
	components: {
		CdxButton,
		CdxIcon
	},
	setup() {
		return {
			cdxIconArrowPrevious
		};
	}
} );
</script>

<template>
	<cdx-button type="quiet">
		<cdx-icon :icon="cdxIconDownload" /> Download
	</cdx-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxButton, CdxIcon } from '@wikimedia/codex';
import { cdxIconDownload } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'QuietButtonWithIcon',
	components: {
		CdxButton,
		CdxIcon
	},
	setup() {
		return {
			cdxIconDownload
		};
	}
} );
</script>

<template>
	<cdx-button>
		<cdx-icon :icon="cdxIconPrevious" icon-label="Back" />
	</cdx-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxButton, CdxIcon } from '@wikimedia/codex';
import { cdxIconPrevious } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'IconOnlyButton',
	components: {
		CdxButton,
		CdxIcon
	},
	setup() {
		return {
			cdxIconPrevious
		};
	}
} );
</script>

<template>
	<cdx-button type="quiet">
		<cdx-icon :icon="cdxIconHelp" icon-label="Help" />
	</cdx-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxButton, CdxIcon } from '@wikimedia/codex';
import { cdxIconHelp } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'QuietIconOnlyButton',
	components: {
		CdxButton,
		CdxIcon
	},
	setup() {
		return {
			cdxIconHelp
		};
	}
} );
</script>