> For the complete documentation index, see [llms.txt](https://help.pickzen.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pickzen.com/design-system/howto/show-a-variant-programmatically.md).

# Show a variant programmatically

We can add the variant class programmatically this way:

```javascript
function Button( {properties, events, scope, slideId, context} ) {
    const { dsModel } = context;

    const [props, setProps] = useState(properties);
    const [active, setActive] = useState(false);

    const actions = {};

    function onClickHandler(event) {
        setActive(true);
        setTimeout( () => {
            setActive(false);
        },1000);
    }

    useComponent(properties, props, actions, style, setProps, dsModel);

    let body = renderSlots(props, setProps, events, actions, scope, dsModel, slideId, context);

    let classes = props.classes;

    if (active) {
        classes = classes + ` __pz_${props._referredUid}_active`;
    }

    return props.visible?<a className={classes} onClick={onClickHandler}>{body}</a>:null;
}
```

When the button is clicked it will be displayed with the *active* variant and a second later will be reset to the *default* variant.