Button

You can add the Button control into your forms or any other components. Buttons may contain text and icons. It is possible to adjust their look and feel via a set of properties.

Related resources

• Get the widget by installing the wx-svelte-core package.
• Check Button API Reference to see the list of configuration properties.
• Explore the samples to visualize the available features.

Initialization

To create a Button instance on a page, you need to complete two steps:

• import the source file of the control on a page:

App.svelte

<script>
    import { Button } from "wx-svelte-core";
</script>

• apply the <Button> tag to initialize a button:

App.svelte

<Button>Click Me</Button>

Setting text for a button

To add a text into a button, you can use the text property.

<Button type="primary" text="Click me"/>

Specifying the appearance of a button

You can specify the desired look and feel of a button by setting the corresponding type. Use the type property for this purpose. As a value, it requires the name of the button type from the list given below.

<Button type={'primary'}>Click Me</Button>

There is a wide variety of predefined types of buttons that will make your application nice-looking:

• 'default'

• 'primary'

• 'secondary'

• 'danger'

• 'link' (can have an icon and be disabled as well as a standard button)

Related sample: Button

Using a button block

There is a special button type that you can use if you need a button to span the full width of its parent. It is called a button block and has two sub-types:

• 'primary block' (has the primary styling)

<Button type={'primary block'}>Click Me</Button>

• 'secondary block' (has the secondary styling)

<Button type={'secondary block'}>Click Me</Button>

Related sample: Button

Handling a button click

To add a click handler function to your button, make use of the click property.

You can declare it in two ways:

• specify the name of the function as a value of the click property:

<script>
    function myFunction() {
        // some custom logic
    };
</script> 

<Button click={myFunction}>Click Me</Button>

• use the {click} shorthand, if the name of the handler function matches the name of the property:

<script>
    function click() {
        // some custom logic
    };
</script>

<div>
    <Button {click}>Click Me</Button>
</div>

Related sample: Button

Showing a message on click

SVAR provides an extended messaging system to implement user-app communication. Since one of the most common cases for a button click is a call of a notice or a dialog box, you can use the library helpers to create a suitable message box while handling a button click.

For example, you can use the showNotice() helper to display a message:

<script>
    import { Button } from "wx-svelte-core";
    import { getContext } from "svelte";

    // getting the helper 
    const { showNotice } = getContext("wx-helpers");

    // creating a handler function
    function click() {
        // using the helper to show a message
        showNotice({
            text: "Button clicked",
        });
    }
</script>

<div>
    // calling the function on a button click
    <Button {click}>Click Me</Button>
</div>

Related sample: Button

You can read detailed information on Messages in the Guides.

Catching a button click

In case you need to catch a click on a button, you can do it by handling the click event:

<script>
    function handleClick(ev){
        console.log("A button has been clicked");   
    }
</script>

<Button on:click={handleClick}>Click me</Button>

The handler function of the click event takes the CustomEvent object as a parameter.

Setting the disabled state

Whenever you need to render a disabled button, you can do it with the help of the disabled property. You can either set the property to true or use the property name without a value:

<!-- equals to <Button disabled>Click Me</Button> -->
<Button disabled={true}> 
    Click Me
</Button>

Related sample: Button

Adding a title

A title is a tooltip text that appears on hovering the mouse cursor over a button and may contain some extra information about the control. Use the title property to add a tooltip for a button:

<Button {click} title="Click me and I will do nothing">Click Me</Button>

Related sample: Button

Styling a button

You can add a custom style to the Button control. For this, you need to provide the desired settings in the style section of the application and set the name of the CSS class as a value of the css property in the control's tag.

<div class="demo-box">
    <Button type={'primary'} css="my" {click}>Click Me</Button>
</div>

<style>
    .demo-box :global(button.my){
        background-color: gold;
    }
</style>

Here's how the stylized button looks like:

In the above example the style is set as global in order to reach an isolated button control. To make the selector specific for the button, the name of the HTML element ("button") is also set before the class name.

Adding icons into buttons

You can add icons into buttons to fit your needs. Use the icon property to apply the name of a chosen icon. The names of default icons start with the wxi- prefix. Here's an example of using icons in different types of buttons, both with a text and without it:

<!-- an icon button with a text -->
<Button icon="wxi-alert">With Icon</Button>
<Button type={'primary'} icon="wxi-alert">With Icon</Button>
<Button type={'secondary'} icon="wxi-alert">With Icon</Button>

<!-- an icon button without a text -->
<Button icon="wxi-alert" />
<Button type={'primary'} icon="wxi-alert" />
<Button type={'secondary'} icon="wxi-alert" />
<Button type={'danger'} icon="wxi-alert" />

<!-- a disabled icon button -->
<Button disabled icon="wxi-alert" />

Related sample: Button

There is a wide range of options for using icons in buttons. Besides the default icons, you can choose different icon packs or apply custom styling to icons.

Using the default icon pack

The default icons' set is based on the Material Design icons' collection. The list of predefined icons is presented in the snippet. This list is being constantly replenished with new icons.

To use the default icons' pack on a page, you need:

• include the pack on the page as in:

<link rel="stylesheet" href="https://cdn.svar.dev/fonts/wxi/wx-icons.css" />

• use the icon property to specify the name of the desired icon. The name of a default icon is formed as wxi-name. The button in the example below gets an alert icon:

<Button type={'link'} icon="wxi-alert" {click}>Click Me</Button>

Using custom icon packs

You can also use any other font icon pack in a SVAR-Svelte based application. For example, you can use:

• Font Awesome icons pack
• Material Design icons pack

These are the necessary steps:

• include the desired font icon pack into your HTML page as follows:

<link rel="stylesheet" 
      href='<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">'/>

• set the full name of the icon you want to use via the icon property:

<!-- a Font Awesome icon -->
<Button type={'link'} icon="fas fa-envelope" {click}>Click Me</Button>

<!-- a Material Design icon -->
<Button type={'link'} icon="mdi mdi-email" {click}>Click Me</Button>

Customizing the appearance of an icon

If necessary, you can change the appearance of an icon by setting it inside the <i> tag and using its style attributes. For example:

<Button type={'primary'}>
    <i class={"wxi-alert"} style="color:yellow;"/>
    With Icon
</Button>

Using HTML content in buttons

If needed, you can use any HTML content inside a button. For example, if you need to display a long text in a button, you can use the <br/> tag to divide the text into lines. Just place it before the word you want to carry over to the next line.

<Button type={'primary'}>Click me<br/>a few times</Button>

Related sample: Button