# button-tab The markup of every demo on , extracted from that page. It is generated, so it cannot disagree with what the page renders. Load the framework from the origin and read first: a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`. ## status Varies: the `disabled` and `active` and `open` state. ```html
``` ## size One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction. Varies: the `disabled` and `active` and `open` state. ```html
``` ## size Shown 8 times on the page, on different grounds. The markup is identical: the ground is a class on the panel around it. ```html
``` ## size Varies: the `disabled` and `active` and `open` state. ```html
``` ## size Varies: the `disabled` and `active` and `open` state. ```html
``` ## size Varies: the `disabled` and `active` and `open` state. ```html
``` ## size Varies: the `disabled` and `active` and `open` state. ```html
``` ## size Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark The forced dark context, `.foreground-on-dark`. Same mechanism as its light twin: the class sets the tokens, the descendants read them, and nothing inside carries a color of its own. Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-dark Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light The forced light context, `.foreground-on-light`, for a ground Kuiper does not paint itself. Write it once on the wrapper and every system foreground inside resolves for a light surface. Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## color on-light Varies: the `disabled` and `active` and `open` state. ```html
``` ## button-tab & switcher Varies: 8 specimens. ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt quam at volutpat facilisis. Phasellus vel nulla sed neque finibus sagittis.

Phasellus vel nulla sed neque finibus sagittis. Praesent eget nunc arcu. Vivamus nec suscipit ex, quis tincidunt urna.

Suspendisse elit nisi, faucibus in elit lacinia, tempor hendrerit quam. Morbi bibendum elit sit amet magna ultricies fermentum.

``` ## button-tab & switcher Varies: 9 specimens. ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt quam at volutpat facilisis. Phasellus vel nulla sed neque finibus sagittis.

Phasellus vel nulla sed neque finibus sagittis. Praesent eget nunc arcu. Vivamus nec suscipit ex, quis tincidunt urna.

Suspendisse elit nisi, faucibus in elit lacinia, tempor hendrerit quam. Morbi bibendum elit sit amet magna ultricies fermentum.

```