Skip to content

Latest commit

 

History

History
187 lines (123 loc) · 4.13 KB

filter-button.md

File metadata and controls

187 lines (123 loc) · 4.13 KB
Raw

FilterButton

A chip-like component that is used to filter lists. Usually used in a group of 2 or more.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { FilterButton } from 'chayns-components';

// ...

<FilterButton {...} />

Props

The FilterButton-component takes the following props:

Name Type Default Required
label string | ReactNode | element
count number
onChange function
checked boolean false
name string
value any
icon string | { iconName: string, prefix: string }
className string
style { [key: string]: string | number }
id string
disabled boolean false
stopPropagation boolean false
small boolean false

label

label?: string | ReactNode | element

A string or ReactNode that is shown inside of the filter button.

count

count?: number

A number that is shown in bold on the right side of the button.

onChange

onChange?: function

A function that will be called when the state of the button changes.

checked

checked?: boolean

Wether the button is checked or not.

name

name?: string

Multiple filter buttons with the same name belong to one group. Only one of the buttons in a group can be active at one time.

value

value?: any

The value that is provided as the first argument to the onChanged-callback when the name-property is set.

icon

icon?: string | { iconName: string, prefix: string }

An icon that will be shown in the button. Use a FontAwesome icon like this: "fa fa-plane".

className

className?: string

A classname string that will be set on the <label>-element. To change the color of the filter button give it a class that sets the CSS color-attribute, not background-color.

style

style?: { [key: string]: string | number }

A React style object that will be applied to the <label>-element. To change the color of the filter button, add a color-style attribute to the button, not background-color.

id

id?: string

An HTML id that will be set on the (invisible) <input>-element. This is given as the second argument to onChange if name is unset.

disabled

disabled?: boolean

Disables any interaction and renders the filter button as disabled.

stopPropagation

stopPropagation?: boolean

Wether to stop propagation of click events to parent elements.

small

small?: boolean

Shrinks the filter button in size.