Button

index.svelte

<script>
  import { Button } from 'twelveui'
  function handleClick(event) {
    // do something
  }
</script>

<Button 
  on:click={handleClick} 
  class="m-8 px-7 py-4 rounded-lg bg-blue-600 text-white">
  Hello World!
</Button>

Accessibility

• role='button' applied to <a> tag, when 'as' prop = 'a'
• aria-pressed=false applied to <a> tag, when 'as' prop = 'a'
  • component handles the click event, to toggle aria-pressed value
• aria-expanded=false applied to <a> tag, when 'as' prop = 'a'
  • component handles the click event, to toggle aria-expanded value
• tabIndex='0' to enable keyboard navigation when 'as' prop = 'a'

Props

Name	Type	Default	Description
as	String	'button'	What html element to use when rendering the button. [ 'button' | 'a' ] Anything other than 'button' or 'a' will render a <button> element.
class	String	empty	CSS class list.
disabled	Boolean	false	Is the button disabled? Only applies to <button> element.
expanded	Boolean	false	The aria-expanded attribute will be toggled when the button is clicked. Only applies to <a> element.
expandedClass	String	empty	CSS class to add to the button when expanded. Only applies to <a> element, and expanded prop must also be passed.
href	String	'#'	Only applies to <a> element.
id	String	'button'	Element ID
name	String	'button'	Only applies to <button> element.
pressed	Boolean	false	The aria-pressed attribute will be toggled when the button is clicked. Only applies to <a> element.
pressedClass	String	empty	CSS class to add to the button when pressed. Only applies to <a> element, and pressed prop must also be passed.
tabindex	String	'0'	Only applies to <a> element.
target	String	'_self'	Where to load the URL. Only applies to <a> element.
type	String	'button'	Only applies to <button> element.
value	String	empty	Only applies to <button> element.

Events

on:click
on:dblclick
on:focus
on:keydown
on:mousedown
on:mouseover
on:submit