@commercetools-uikit/view-switcher NPM

ViewSwitcher

Description

ViewSwitchers allow users to toggle between two or more different views of the same, similar or related content items within the same space on screen.

When to use

ViewSwitchers are frequently used to let users toggle between different formatting's, like with a grid view and a table view.

When not to use

Do not use the ViewSwitcher as Tabs Tabs should be used when the content on the page is divided into related sections but without any overlap. See tabs as separate of content.

Do not use the ViewSwitcher as Toggle Toggles are used for “yes/no” or “on/off” binary decisions.

Do's and Don'ts“

If you use an icon within the ViewSwitcher, each switch needs to have an icon.
No colored icons are allowed. Only color-solid (black)
Do not use two lines of text in one switch field.

Installation

yarn add @commercetools-uikit/view-switcher

npm --save install @commercetools-uikit/view-switcher

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import ViewSwitcher from '@commercetools-uikit/view-switcher';

const Example = () => (
  <ViewSwitcher.Group
    defaultSelected="Button 2"
    onChange={(value) => console.log(value)}
  >
    <ViewSwitcher.Button isDisabled value="button 1">
      View 1
    </ViewSwitcher.Button>
    <ViewSwitcher.Button value="button 2">View 2</ViewSwitcher.Button>
    <ViewSwitcher.Button value="button 3">View 3</ViewSwitcher.Button>
  </ViewSwitcher.Group>
);

export default Example;

Properties

ViewSwitcher.Group

Props	Type	Required	Description
`isCondensed`	`boolean`		Indicates that the view switcher can be reduced to save space
`children`	`ReactNode`	✅	Pass one or more `ViewSwitcher.Button` components
`onChange`	`Function`See signature.		Will be triggered whenever a `ViewSwitcher.Button` is clicked. Called with the ViewSwitcherButton value
`defaultSelected`	`string`	✅	Indicates the default selected button

Signatures

Signature `onChange`

(value: string) => void

ViewSwitcher.Button

Props	Type	Required	Description
`isDisabled`	`boolean`		If `true`, indicates that the button is in a disabled state.
`children`	`ReactNode`	✅	Indicates the label of the `ViewSwitcher.Button`.
`onClick`	`Function`See signature.		Will be triggered whenever a button is clicked.
`value`	`string`	✅	The value identifying this `ViewSwitcher.Button`.

Signatures

Signature `onClick`

(value: string) => void

Invariants

The ViewSwitcher.Group must have at least one ViewSwitcher.Button element as children

javascript typescript design-system react uikit

@babel/runtime @babel/runtime-corejs3 @commercetools-uikit/accessible-button @commercetools-uikit/design-system @commercetools-uikit/utils @emotion/react @emotion/styled lodash prop-types

@everything-registry/sub-chunk-190 @commercetools-frontend/ui-kit @infinitebrahmanuniverse/nolb-_comm

0.0.0-canary-20240502125854

5 days ago

0.0.0-canary-20240503144721

3 days ago

0.0.0-canary-20240503111328

4 days ago

0.0.0-canary-20240502134907

4 days ago

0.0.0-canary-20240429095712

8 days ago

0.0.0-canary-20240429151613

7 days ago

19.2.0

8 days ago

0.0.0-canary-20240429110037

8 days ago

0.0.0-canary-20240429080049

8 days ago

0.0.0-canary-20240426091858

11 days ago

0.0.0-canary-20240425084041

12 days ago

0.0.0-canary-20240424133322

12 days ago

0.0.0-canary-20240424125820

13 days ago

0.0.0-canary-20240424172230

12 days ago

0.0.0-canary-20240423075704

14 days ago

0.0.0-canary-20240422074013

15 days ago

0.0.0-canary-20240417141019

19 days ago

19.1.0

19 days ago

0.0.0-canary-20240417152832

19 days ago

0.0.0-canary-20240416122003

21 days ago

0.0.0-canary-20240416080627

21 days ago

0.0.0-canary-20240415155633

21 days ago

0.0.0-canary-20240415154231

21 days ago

0.0.0-canary-20240412080035

25 days ago

0.0.0-canary-20240411070250

26 days ago

0.0.0-canary-20240409155122

27 days ago

0.0.0-canary-20240408094037

29 days ago

0.0.0-canary-20240408081653

29 days ago

0.0.0-canary-20240408075655

29 days ago

0.0.0-canary-20240408082643

29 days ago

0.0.0-canary-20240408083654

29 days ago

0.0.0-canary-20240404141323

1 month ago

0.0.0-canary-20240401115502

1 month ago

0.0.0-canary-20240326165038

1 month ago

19.0.0

2 months ago

0.0.0-canary-20240322105825

2 months ago

0.0.0-canary-20240321125808

2 months ago

0.0.0-canary-20240321141818

2 months ago

0.0.0-canary-20240321085855

2 months ago

0.0.0-canary-20240321154822

2 months ago

0.0.0-canary-20240320080808

2 months ago

0.0.0-canary-20240319155008

2 months ago

0.0.0-canary-20240319081838

2 months ago

0.0.0-canary-20240319084420

2 months ago

0.0.0-canary-20240319084832

2 months ago

18.5.0

2 months ago

0.0.0-canary-20240318154412

2 months ago

0.0.0-canary-20240318073724

2 months ago

0.0.0-canary-20240311155934

2 months ago

18.4.0

2 months ago

0.0.0-canary-20240311163353

2 months ago

0.0.0-canary-20240229082531

2 months ago

0.0.0-canary-20240229120215

2 months ago

18.3.0

2 months ago

0.0.0-canary-20240222103400

2 months ago

18.2.0

3 months ago

0.0.0-canary-20240221114521

3 months ago

0.0.0-canary-20240219160124

3 months ago

18.1.0

3 months ago

0.0.0-canary-20240214142237

3 months ago

0.0.0-canary-20240214093533

3 months ago

18.0.0

3 months ago

0.0.0-canary-20240213091505

3 months ago

0.0.0-canary-20240212084750

3 months ago

0.0.0-canary-20240212173604

3 months ago

0.0.0-canary-20240209081746

3 months ago

0.0.0-canary-20240208102915

3 months ago

0.0.0-canary-20240207115036

3 months ago

17.1.0

3 months ago

0.0.0-canary-20240206161325

3 months ago

0.0.0-canary-20240202080838

3 months ago

0.0.0-canary-20240131162657

3 months ago

0.0.0-canary-20240131092002

3 months ago

0.0.0-canary-20240130102905

3 months ago

0.0.0-canary-20240129162718

3 months ago

17.0.1

3 months ago

0.0.0-canary-20240123154713

3 months ago

0.0.0-canary-20240118123543

4 months ago

17.0.0

4 months ago

0.0.0-canary-20240118125451

4 months ago

0.0.0-canary-20240117152032

4 months ago

0.0.0-canary-20240116201138

4 months ago

0.0.0-canary-20240116164945

4 months ago

0.0.0-canary-20240112093529

4 months ago

0.0.0-canary-20240109150004

4 months ago

0.0.0-canary-20231229075922

4 months ago

0.0.0-canary-20231221092239

5 months ago

0.0.0-canary-20231219120012

5 months ago

0.0.0-canary-20231219120942

5 months ago

0.0.0-canary-20231219122613

5 months ago

0.0.0-canary-20231219074106

5 months ago

0.0.0-canary-20231214155242

5 months ago

16.12.1

5 months ago

0.0.0-canary-20231204132537

5 months ago

0.0.0-canary-20231204104818

5 months ago

16.12.0

5 months ago

0.0.0-canary-20231128120330

5 months ago

0.0.0-canary-20231128121512

5 months ago

0.0.0-canary-20231128090613

5 months ago

0.0.0-canary-20230927101743

7 months ago

0.0.0-canary-20230824090411

9 months ago

0.0.0-canary-20230731102408

9 months ago

0.0.0-canary-20230822093959

9 months ago

0.0.0-canary-20231120163956

6 months ago

0.0.0-canary-20230802081825

9 months ago

0.0.0-canary-20230721071347

10 months ago

0.0.0-canary-20230705071834

10 months ago

0.0.0-canary-20230922090152

8 months ago

0.0.0-canary-20230919064630

8 months ago

0.0.0-canary-20231023144936

7 months ago

0.0.0-canary-20230823133527

9 months ago

16.5.0

10 months ago

16.6.1

9 months ago

0.0.0-canary-20231120183429

6 months ago

16.6.0

9 months ago

0.0.0-canary-20230831113711

8 months ago

0.0.0-canary-20230713101815

10 months ago

0.0.0-canary-20231030124826

6 months ago

0.0.0-canary-20231117123740

6 months ago

0.0.0-canary-20231114154535

6 months ago

0.0.0-canary-20230817081120

9 months ago

0.0.0-canary-20230719081123

10 months ago

0.0.0-canary-20231114065040

6 months ago

0.0.0-canary-20230817075326

9 months ago

0.0.0-canary-20230821101457

9 months ago

0.0.0-canary-20231117094453

6 months ago

0.0.0-canary-20231020101520

7 months ago

0.0.0-canary-20230731104935

9 months ago

0.0.0-canary-20230706135851

10 months ago

16.4.1

10 months ago

0.0.0-canary-20230926074140

7 months ago

0.0.0-canary-20230731114902

9 months ago

16.9.0

6 months ago

16.11.0

6 months ago

0.0.0-canary-20230919074955

8 months ago

0.0.0-canary-20231020071712

7 months ago

0.0.0-canary-20230731113035

9 months ago

0.0.0-canary-20231020172218

7 months ago

0.0.0-canary-20230908094846

8 months ago

0.0.0-canary-20231020070159

7 months ago

0.0.0-canary-20230713133803

10 months ago

0.0.0-canary-20230927090022

7 months ago

0.0.0-canary-20231012155352

7 months ago

0.0.0-canary-20230811122631

9 months ago

0.0.0-canary-20230901092912

8 months ago

0.0.0-canary-20230921130022

8 months ago

16.10.0

6 months ago

0.0.0-canary-20231010104830

7 months ago

0.0.0-canary-20231109141457

6 months ago

0.0.0-canary-20231107092719

6 months ago

0.0.0-canary-20231002082126

7 months ago

0.0.0-canary-20230713135809

10 months ago

0.0.0-canary-20231023153427

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

0.0.0-canary-20230830124456

8 months ago

0.0.0-canary-20231020094744

7 months ago

0.0.0-canary-20231107090630

6 months ago

0.0.0-canary-20230727081153

9 months ago

0.0.0-canary-20230704112725

10 months ago

0.0.0-canary-20231018130022

7 months ago

0.0.0-canary-20231012152601

7 months ago

16.8.0

6 months ago

0.0.0-canary-20230811081638

9 months ago

0.0.0-canary-20230721064032

10 months ago

0.0.0-canary-20231106201932

6 months ago

16.4.0

10 months ago

0.0.0-canary-20230628093418

10 months ago

16.3.0

11 months ago

0.0.0-canary-20230622095539

11 months ago

0.0.0-canary-20230615074404

11 months ago

0.0.0-canary-20230606070758

11 months ago

16.2.1

11 months ago

0.0.0-canary-20230612081719

11 months ago

0.0.0-canary-20230530084740

11 months ago

16.2.0

11 months ago

0.0.0-canary-20230602105252

11 months ago

0.0.0-canary-20230531075415

11 months ago

0.0.0-canary-20230516152727

12 months ago

0.0.0-canary-20230517085655

12 months ago

0.0.0-canary-20230510151703

12 months ago

0.0.0-canary-20230511114942

12 months ago

0.0.0-canary-20230508094010

12 months ago

0.0.0-canary-20230508202228

12 months ago

0.0.0-canary-20230515141330

12 months ago

0.0.0-canary-20230509073057

12 months ago

16.1.1

12 months ago

16.1.0

12 months ago

0.0.0-canary-20230508154656

12 months ago

0.0.0-canary-20230511082947

12 months ago

0.0.0-canary-20230512103300

12 months ago

0.0.0-canary-20230519193855

12 months ago

0.0.0-canary-20230508132441

12 months ago

0.0.0-canary-20230517083811

12 months ago

0.0.0-canary-20230523175950

12 months ago

0.0.0-canary-20230421074713

1 year ago

0.0.0-canary-20230418125532

1 year ago

0.0.0-canary-20230414072753

1 year ago

0.0.0-canary-20230419102851

1 year ago

0.0.0-canary-20230413110907

1 year ago

15.15.0

1 year ago

15.15.1

1 year ago

0.0.0-canary-20230420142611

1 year ago

0.0.0-canary-20230411145007

1 year ago

0.0.0-canary-20230418082825

1 year ago

0.0.0-canary-20230425170452

1 year ago

0.0.0-canary-20230425100705

1 year ago

0.0.0-canary-20230411085857

1 year ago

0.0.0-canary-20230425104503

1 year ago

0.0.0-canary-20230411070924

1 year ago

0.0.0-canary-20230419083933

1 year ago

0.0.0-canary-20230414074305

1 year ago

0.0.0-canary-20230417133401

1 year ago

0.0.0-canary-20230412115514

1 year ago

0.0.0-canary-20230419090337

1 year ago

0.0.0-canary-20230417121433

1 year ago

16.0.0

1 year ago

0.0.0-canary-20230322092815

1 year ago

15.13.2

1 year ago

0.0.0-canary-20230322131309

1 year ago

0.0.0-canary-20230328114311

1 year ago

0.0.0-canary-20230315103223

1 year ago

0.0.0-canary-20230322092658

1 year ago

0.0.0-canary-20230329085321

1 year ago

0.0.0-canary-20230315083610

1 year ago

0.0.0-canary-20230322092742

1 year ago

0.0.0-canary-20230306130648

1 year ago

0.0.0-canary-20230323075708

1 year ago

0.0.0-canary-20230316110348

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-canary-20230316092959

1 year ago

0.0.0-canary-20230309080723

1 year ago

0.0.0-canary-20230317091919

1 year ago

0.0.0-canary-20230310083908

1 year ago

0.0.0-canary-20230322095716

1 year ago

0.0.0-canary-20230405095946

1 year ago

0.0.0-canary-20230308143554

1 year ago

0.0.0-canary-20230405091338

1 year ago

0.0.0-canary-20230322092547

1 year ago

0.0.0-canary-20230314112821

1 year ago

0.0.0-canary-20230321180521

1 year ago

0.0.0-canary-20230405103941

1 year ago

0.0.0-canary-20230330081111

1 year ago

0.0.0-canary-20230228075726

1 year ago

15.13.1

1 year ago

0.0.0-canary-20230302112958

1 year ago

0.0.0-canary-20230301084013

1 year ago

15.13.0

1 year ago

0.0.0-canary-20230227094010

1 year ago

0.0.0-canary-20230227130646

1 year ago

0.0.0-canary-20230224091531

1 year ago

0.0.0-canary-20230223121241

1 year ago

0.0.0-canary-20230223135944

1 year ago

0.0.0-canary-20230215152602

1 year ago

0.0.0-canary-20230222100732

1 year ago

0.0.0-canary-20230222083950

1 year ago

0.0.0-canary-20230216120756

1 year ago

15.12.0

1 year ago

0.0.0-canary-20230210081944

1 year ago

0.0.0-canary-20230210100519

1 year ago

0.0.0-canary-20230210083457

1 year ago

0.0.0-canary-20230209082519

1 year ago

0.0.0-canary-20230209162741

1 year ago

0.0.0-canary-20230209112722

1 year ago

0.0.0-canary-20230113105748

1 year ago

0.0.0-canary-20230127122043

1 year ago

0.0.0-canary-20230104130328

1 year ago

0.0.0-canary-20230117150712

1 year ago

0.0.0-canary-20230109112033

1 year ago

0.0.0-canary-20230118142339

1 year ago

0.0.0-canary-20230202141152

1 year ago

0.0.0-canary-20230126160005

1 year ago

0.0.0-canary-20230125080555

1 year ago

15.10.0

1 year ago

0.0.0-canary-20230123100630

1 year ago

0.0.0-canary-20230201081107

1 year ago

15.9.0

1 year ago

0.0.0-canary-20230130113601

1 year ago

0.0.0-canary-20230207164813

1 year ago

0.0.0-canary-20230201113158

1 year ago

15.11.2

1 year ago

15.11.0

1 year ago

0.0.0-canary-20230127162103

1 year ago

15.11.1

1 year ago

0.0.0-canary-20230110115313

1 year ago

0.0.0-canary-20230131074410

1 year ago

0.0.0-canary-20230123115820

1 year ago

0.0.0-canary-20230111093516

1 year ago

0.0.0-canary-20230110155940

1 year ago

0.0.0-canary-20230118141046

1 year ago

0.0.0-canary-20230110112252

1 year ago

0.0.0-canary-20230117144326

1 year ago

0.0.0-canary-20230110081822

1 year ago

0.0.0-canary-20230127130607

1 year ago

0.0.0-canary-20221222123747

1 year ago

0.0.0-canary-20221117123400

1 year ago

15.7.0

1 year ago

0.0.0-canary-20221202123550

1 year ago

0.0.0-canary-20221117162014

1 year ago

0.0.0-canary-20221116191127

1 year ago

0.0.0-canary-20221021070422

2 years ago

0.0.0-canary-20221021100214

2 years ago

0.0.0-canary-20221129161319

1 year ago

0.0.0-canary-20221219074438

1 year ago

0.0.0-canary-20221111150532

1 year ago

0.0.0-canary-20221115075630

1 year ago

0.0.0-canary-20221212084555

1 year ago

15.4.0

1 year ago

15.8.0

1 year ago

0.0.0-canary-20221216113457

1 year ago

0.0.0-canary-20221208124754

1 year ago

0.0.0-canary-20221117132421

1 year ago

0.0.0-canary-20221201154127

1 year ago

0.0.0-canary-20221123080130

1 year ago

0.0.0-canary-20221221171026

1 year ago

0.0.0-canary-20221130094432

1 year ago

0.0.0-canary-20221215084427

1 year ago

0.0.0-canary-20221216131057

1 year ago

0.0.0-canary-20221021071823

2 years ago

0.0.0-canary-20221020145947

2 years ago

0.0.0-canary-20221021104744

2 years ago

15.5.0

1 year ago

0.0.0-canary-20221104082935

2 years ago

0.0.0-canary-20221110135708

1 year ago

15.5.1

1 year ago

0.0.0-canary-20221114113055

1 year ago

0.0.0-canary-20221115144427

1 year ago

0.0.0-canary-20221021164204

2 years ago

0.0.0-canary-20221124075414

1 year ago

0.0.0-canary-20221110195901

1 year ago

0.0.0-canary-20221216072317

1 year ago

0.0.0-canary-20221020152117

2 years ago

0.0.0-canary-20221021101733

2 years ago

15.6.0

1 year ago

0.0.0-canary-20221116162527

1 year ago

0.0.0-canary-20221202074533

1 year ago

0.0.0-canary-20221214091613

1 year ago

0.0.0-canary-20221221095147

1 year ago

0.0.0-canary-20221118181738

1 year ago

0.0.0-canary-20221117112509

1 year ago

0.0.0-canary-20221114151317

1 year ago

0.0.0-canary-20221222112109

1 year ago

0.0.0-canary-20221121181659

1 year ago

0.0.0-canary-20221221132302

1 year ago

0.0.0-canary-20221109075537

1 year ago

0.0.0-canary-20221014083726

2 years ago

15.3.0

2 years ago

0.0.0-canary-20221005114906

2 years ago

0.0.0-canary-20221006065032

2 years ago

15.2.4

2 years ago

0.0.0-canary-20221003071723

2 years ago

0.0.0-canary-20220915201458

2 years ago

0.0.0-canary-20220915121551

2 years ago

0.0.0-canary-20220819122935

2 years ago

0.0.0-canary-20220907131350

2 years ago

0.0.0-canary-20220915131615

2 years ago

0.0.0-canary-20220920102915

2 years ago

0.0.0-canary-20220907113807

2 years ago

0.0.0-canary-20220919103307

2 years ago

0.0.0-canary-20220831100006

2 years ago

0.0.0-canary-20220908141149

2 years ago

0.0.0-canary-20220902120814

2 years ago

15.2.1

2 years ago

15.2.2

2 years ago

15.2.3

2 years ago

0.0.0-canary-20220908103902

2 years ago

0.0.0-canary-20220825070216

2 years ago

0.0.0-canary-20220808094220

2 years ago

0.0.0-canary-20220808085049

2 years ago

0.0.0-canary-20220808083245

2 years ago

0.0.0-canary-20220808082151

2 years ago

0.0.0-canary-20220808080918

2 years ago

0.0.0-canary-20220808075414

2 years ago

0.0.0-canary-20220804130422

2 years ago

15.2.0

2 years ago

0.0.0-canary-20220728141741

2 years ago

0.0.0-canary-20220727134623

2 years ago

15.1.2

2 years ago

0.0.0-canary-20220721155245

2 years ago

15.1.1

2 years ago

0.0.0-canary-20220721095857

2 years ago

0.0.0-canary-20220714154335

2 years ago

15.1.0

2 years ago

0.0.0-canary-20220711143414

2 years ago

0.0.0-canary-20220704092123

2 years ago

0.0.0-canary-20220704090217

2 years ago

0.0.0-canary-20220701072321

2 years ago

0.0.0-canary-20220629153428

2 years ago

0.0.0-canary-20220629105836

2 years ago

0.0.0-canary-20220629083743

2 years ago

0.0.0-canary-20220617121016

2 years ago

0.0.0-canary-20220617115410

2 years ago

0.0.0-canary-20220607110640

2 years ago

0.0.0-canary-20220607104716

2 years ago

0.0.0-canary-20220607102821

2 years ago

0.0.0-canary-20220603102524

2 years ago

0.0.0-canary-20220603101256

2 years ago

0.0.0-canary-20220603091700

2 years ago

ViewSwitcher

Description

When to use

When not to use

Do's and Don'ts“

Installation

Usage

Properties

ViewSwitcher.Group

Signatures

Signature onChange

ViewSwitcher.Button

Signatures

Signature onClick

Invariants

Signature `onChange`

Signature `onClick`