jio-button

Props

Prop name	Description	Type	Values	Default
theme	The theme you want to use @values primary, secondary	Theme	-	"primary"
variant	The button variant you want to use @values primary, secondary	buttonVariant	-	"primary"
outline	@deprecated Use variant set to "secondary" instead	boolean	-	false
round	Make the button round	boolean	-	false
palette	The palette you want to use @values "hemelblauw", "donkergeel", "lichtgeel", "oranje", "rood", "paars", "groen", "donkergroen", "donkerblauw", "lichtblauw", "grijs", "donkergrijs", "wit", "zwart"	Palette	-
highContrast	Use high contrast colors	boolean	-	false

Slots

Name	Description	Bindings
default

---

View on Gitlab

General

This component is based on the Bootstrap button.

View design in Figma

Code examples

A normal button.

<template> <div class="jio-core"> <jio-button @click="click">Button</jio-button> </div> </template> <script setup lang="ts"> function click() { alert("Clicked!"); } </script>

A button with an outline.

<template> <div class="jio-core"> <jio-button variant="secondary" @click="click">Button</jio-button> </div> </template> <script setup lang="ts"> function click() { alert("Clicked!"); } </script>

A round button.

<template> <div class="jio-core"> <jio-button round @click="click">Button</jio-button> </div> </template> <script setup lang="ts"> function click() { alert("Clicked!"); } </script>

A disabled button.

<template> <div class="jio-core"> <jio-button disabled @click="click">Button</jio-button> </div> </template> <script setup lang="ts"> function click() { alert("Clicked!"); } </script>

High contrast buttons.

<template> <div class="jio-core"> <jio-button highContrast @click="click" class="m-3">Button</jio-button> <jio-button highContrast variant="secondary" @click="click" class="m-3" >Button</jio-button > </div> </template> <script setup lang="ts"> function click() { alert("Clicked!"); } </script>