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.

<PillSwitch>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch isActive>
  <Icon name="emotion-happy" />
  Pill title
</PillSwitch>
<PillSwitch>
  <Icon name="emotion-happy" />
  Pill title
  <Dot color="success" />
</PillSwitch>
<PillSwitch>
  <Icon name="emotion-happy" />
  Pill title
  <Dot color="danger" />
</PillSwitch>
<PillSwitch>
  <Icon name="emotion-happy" />
  Pill title
  <Dot color="warning" />
</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">
  <Icon name="emotion-happy" />
  Pill title
  <Dot color="danger" />
</PillSwitch>
<PillSwitch size="small">
  <Icon name="emotion-happy" />
  Pill title
  <Dot color="warning" />
</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</PillSwitch>
<PillSwitch href="#">Pill link</PillSwitch>
<PillSwitch href="#">Pill link</PillSwitch>
<PillSwitch href="#" isDisabled>
  Pill link
</PillSwitch>

<PillSwitch><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch isActive><Icon name="emotion-happy" />Pill title</PillSwitch>
<PillSwitch><Icon name="emotion-happy" />Pill title<Dot color="success" /></PillSwitch>
<PillSwitch><Icon name="emotion-happy" />Pill title<Dot color="danger" /></PillSwitch>
<PillSwitch><Icon name="emotion-happy" />Pill title<Dot color="warning" /></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"><Icon name="emotion-happy" />Pill title<Dot color="danger" /></PillSwitch>
<PillSwitch size="small"><Icon name="emotion-happy" />Pill title<Dot color="warning" /></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="#" dotColor="danger">Pill link</PillSwitch>
<PillSwitch href="#" dotColor="warning">Pill link</PillSwitch>
<PillSwitch 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
`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