Shopware 6 - how to add button component in the plugin System configuration in SW6

Question

I want to have button component or input-type=button on the plugin system configuration page.

Does anyone knows how to add it in config.xml

I went through main file of Shopware Core System Config Schema -

but type does not have any button related thing.

<xs:simpleType name="type">
        <xs:restriction base="xs:string">
            <xs:enumeration value="text"/>
            <xs:enumeration value="textarea"/>
            <xs:enumeration value="url"/>
            <xs:enumeration value="password"/>
            <xs:enumeration value="int"/>
            <xs:enumeration value="float"/>
            <xs:enumeration value="bool"/>
            <xs:enumeration value="checkbox"/>
            <xs:enumeration value="datetime"/>
            <xs:enumeration value="date"/>
            <xs:enumeration value="time"/>
            <xs:enumeration value="colorpicker"/>
            <xs:enumeration value="single-select"/>
            <xs:enumeration value="multi-select"/>
        </xs:restriction>
    </xs:simpleType>

Answer 1

Short answer: You can't.

Long answer: You can spawn any vue-js component via the component type in your config.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/master/src/Core/System/SystemConfig/Schema/config.xsd">
    <card>
        <title>#Test# Settings</title>

        <component name="sw-button">
            <name>button</name>
            <variant>primary</variant>
        </component>
    </card>
</config>

Every option you assign except for name is passed as a prop to the component. However the problem with the sw-button is, that the text is given via the default slot which can not be passed as a prop. So unfortunately you can't create buttons via the config.xml

But this doenst really make sense anyway, since you cant control the actions that need to take place without any vue-js. The easiest thing would be to create your own vue-js module.