Skip to main content Skip to docs navigation

PillSwitch

button component for filtering or alternative navigation

Examples

in this component it is possible to use the Icon and Dot component inside according to the example below.

examples

<PillSwitch>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch isActive>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch themeColor="salmon-red" isActive>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch>
  <Icon name="emotion-happy" />
  Pill title
  <Dot color="success" />
</PillSwitch>
<PillSwitch isDisabled>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
...
<PillSwitch size="small">
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch size="small" isActive>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch size="small">
  <Icon name="emotion-happy" />
  Pill title
  <Dot color="success" />
</PillSwitch>
<PillSwitch size="small" isDisabled>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
...
<PillSwitch
  href="#"
  onClick={() => {
    alert("clicked!");
    return false;
  }}
>
  Pill link
</PillSwitch>
<PillSwitch
  onClick={() => {
    alert("clicked button!");
  }}
>
  Pill button link
</PillSwitch>
<PillSwitch href="#" isActive>
  Pill link
</PillSwitch>
<PillSwitch href="#" dotColor="success">
  Pill link
</PillSwitch>
<PillSwitch href="#" isDisabled>
  Pill link
</PillSwitch>
...
<PillSwitch theme="dark">
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch theme="dark" isActive>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch theme="dark" themeColor="honey-yellow" isActive>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch theme="dark">
  <Icon name="emotion-happy" />
  Pill title
  <Dot color="success" />
</PillSwitch>
<PillSwitch theme="dark" isDisabled>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
...
<PillSwitch theme="dark" size="small">
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch theme="dark" size="small" isActive>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch theme="dark" size="small">
  <Icon name="emotion-happy" />
  Pill title
  <Dot color="success" />
</PillSwitch>
<PillSwitch theme="dark" size="small" isDisabled>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
...
<PillSwitch
  theme="dark"
  themeColor="salmon-red"
  isActive
  href="#"
  onClick={() => {
    alert("clicked!");
    return false;
  }}
>
  Pill link
</PillSwitch>
<PillSwitch
  theme="dark"
  onClick={() => {
    alert("clicked button!");
  }}
>
  Pill button link
</PillSwitch>
<PillSwitch theme="dark" href="#" isActive>
  Pill link
</PillSwitch>
<PillSwitch theme="dark" href="#" dotColor="success">
  Pill link
</PillSwitch>
<PillSwitch theme="dark" href="#" isDisabled>
  Pill link
</PillSwitch>
<PillSwitch><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch isActive><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch themeColor="salmon-red" isActive><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch><Icon name="emotion-happy" />Pill title<Dot color="success" /></PillSwitch>
<PillSwitch isDisabled><Icon name="emotion-happy" />Pill title</PillSwitch>
...
<PillSwitch size="small"><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch size="small" isActive><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch size="small"><Icon name="emotion-happy" />Pill title<Dot color="success" /></PillSwitch>
<PillSwitch size="small" isDisabled><Icon name="emotion-happy" />Pill title</PillSwitch>
...
<PillSwitch href="#" onClick="alert('clicked!');return false;">Pill link</PillSwitch>
<PillSwitch onClick="alert('clicked button!');">Pill button link</PillSwitch>
<PillSwitch href="#" isActive>Pill link</PillSwitch>
<PillSwitch href="#">Pill link<Dot color="success" /></PillSwitch>
<PillSwitch href="#" isDisabled>Pill link</PillSwitch>
...
<PillSwitch theme="dark"><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch theme="dark" isActive><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch theme="dark" themeColor="honey-yellow" isActive><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch theme="dark"><Icon name="emotion-happy" />Pill title<Dot color="success" /></PillSwitch>
<PillSwitch theme="dark" isDisabled><Icon name="emotion-happy" />Pill title</PillSwitch>
...
<PillSwitch theme="dark" size="small"><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch theme="dark" size="small" isActive><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch theme="dark" size="small"><Icon name="emotion-happy" />Pill title<Dot color="success" /></PillSwitch>
<PillSwitch theme="dark" size="small" isDisabled><Icon name="emotion-happy" />Pill title</PillSwitch>
...
<PillSwitch theme="dark" themeColor="salmon-red" isActive href="#" onClick="alert('clicked!');return false;">Pill link</PillSwitch>
<PillSwitch theme="dark" onClick="alert('clicked button!');">Pill button link</PillSwitch>
<PillSwitch theme="dark" href="#" isActive>Pill link</PillSwitch>
<PillSwitch theme="dark" href="#">Pill link<Dot color="success" /></PillSwitch>
<PillSwitch theme="dark" href="#" isDisabled>Pill link</PillSwitch>

API

Prop name Type Default Description
size small, medium medium Size of the component
onClick React.MouseEventHandler, string - Execute a JavaScript when a button is clicked
href string - html anchor href attribute (this propose changes the element to an anchor)
target string - html anchor target attribute
title string - html title attribute
isActive bool false specifies whether PillSwitch is active
themeColor Theme Color - specifies the theme color of the PillSwitch component
theme Theme dictionary light Pill switch theme
isDisabled bool false specifies whether PillSwitch is disabled
linkComponent (only react) ElementType - the option to change the anchor component to another
UNSAFE_className string - Wrapper custom classname

On this component it's possible to insert property id, data-* and aria-* properties.

On this page