Best way creating own components

I wanted to create following own component:
A HorizontalLayout which displays a Label and a Button. With clicking the button, the components on the view will be changed. So just the view will be changed within this component and no data on the server.

I read about different ways to create own components:
- Composite by extending CustomComponent (https://vaadin.com/book/vaadin7/-/page/components.customcomponent.html)
- Client-Side Widget (https://vaadin.com/book/vaadin7/-/page/clientside.widget.html)
- Server-Side Component (https://vaadin.com/book/-/page/gwt.server-side.html

Also I read about a WidgetSet (https://vaadin.com/book/vaadin6/-/page/gwt.widgetset.html).

So I wasn't sure if I've choosen the correct way to create my component. I tried it with extending CustomComponent. Is this the best solution here? And do I need to add my component to the WidgetSet or is it just for the other ways creating components?

CustomComponent is purely server-side stuff, so if you use that, you do not need to do anything with widgets or widget sets, which are client-side stuff.

Even using the CustomComponent is entirely optional; it's just a wrapper around a layout component that you use to do the actual composition. Its about only use is to hide implementation details.

So is the best way for my component to create a client-side widget and add it to the WidgetSet?
If yes, when I try to extend by widget or composite I cannot add my component by function addComponent() to a layout..

Or can you explain, when I should use server-side and when client-side components?

Create a class ...
public class MyComponent extends CustomComponent{}

Add a layout and some buttons to it....

. . .
In a View ... defined as so ...
public class MyView extends VerticalLayout implements View  {

import MyComponent;
private MyComponent   myComponentInstance;
public MyView(){  // constructor

myComponentInstance = new MyComponent();
this.addComponent(myComponentInstance);
}}

That is generally how you can do it.