Button

Import the component in the script section of your Svelte file:

import Button from 'svve11/Button.svelte'
            

Creating a Button

To supply the button with its contents, an options object is passed as a prop to the button. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 5 properties.

Required Props

• label (string): Sets the aria-label attribute of the button component.
• content (string): Sets the text that is displayed inside the button component.
• handleClick (function): Defines the action or event to be triggered when the button is clicked.

Optional Props

• id (string): Sets the id attribute of the button component.
• style (string): Sets the styles of the button component.

Example Options Object:

const buttonOptions = {
  id: 'demo-button-1',
  content: 'Click me!',
  label: 'accessible-button-1',
  handleClick: () => alert('You clicked a button!'),
  style: 'height: 50px; width: 300px;'
};
              

Instantiating a button

<Button options={buttonOptions}/>
              

Example Button: