JSFiddle - React, Tailwind, and code Playground

by enyojs

CSS

.button {
    max-width: 150px;
    text-align: center;
    position: relative;
    height: 50px;
    line-height: 50px;
}
.wrapper {
    white-space: nowrap;
    display: inline-block;
}
.wrapper.bottom {
    position: relative;
    top: -52px;
}
.wrapper > * {
    display: table-cell;
    vertical-align: bottom;
}
.label-wrapper {
    position: relative;
    width: 100%;
}
.label {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.hidden {
    opacity:0;
}

JavaScript

enyo.kind({
    name: "ToggleButton",
    classes: "button",
    kind:"enyo.Button",
    published: {
        value: false,
        onContent: "On",
        offContent: "Off"
    },
    components: [
        {classes:"wrapper", name:"off", components: [
            {classes:"label-wrapper", components: [
                {classes:"label", name:"offLabel"}
            ]},
            {content:": ", allowHtml:true},
            {name:"offContent"}
        ]},
        {tag:"br"},
        {classes:"wrapper bottom hidden", name:"on", components: [
            {classes:"label-wrapper", components: [
                {classes:"label", name:"onLabel"}
            ]},
            {content:": ", allowHtml:true},
            {name:"onContent", content:"foo"}
        ]}
    ],
    contentChanged: function() {
        this.$.onLabel.setContent(this.content);
        this.$.offLabel.setContent(this.content);
        this.$.onContent.setContent(this.onContent);
        this.$.offContent.setContent(this.offContent);
    },
    tap: function() {
        this.value = !this.value;
        this.$.off.addRemoveClass("hidden", this.value);
        this.$.on.addRemoveClass("hidden", !this.value);
    }
});

enyo.kind({
    name: "MySample",
    components: [
        {kind:"ToggleButton", content:"Short"},
        {kind:"ToggleButton", content:"Really really really long"},
        {tag: "br"},
        {kind:"ToggleButton", content:"Short", onContent:"Awesome", offContent:"Sad"},
        {kind:"ToggleButton", content:"Really really really long", onContent:"Awesome", offContent:"Sad"},
    ]
});

new MySample().write();