Gravity UI – UIKit

The Palette component is used to display a grid of icons, emojis, reactions, and symbols which you can select or deselect.

import {Palette} from '@gravity-ui/uikit';

Disabled state

You can disable every option using the disabled property. If you want to disable only certain options, you can change the disabled property of those options (PaletteOption[]).

import type {PaletteOption} from '@gravity-ui/uikit';
import {Palette} from '@gravity-ui/uikit';


const options: PaletteOption[] = [
    {content: '😎', value: 'ID-cool'},
    {content: '🥴', value: 'ID-woozy'},
];


const disabledOptions: PaletteOption[] = [{...options[0], disabled: true}, options[1]];


export default function () {
    return (
        <>
            <Palette options={disabledOptions} />
            <Palette options={options} disabled />
        </>
    );
}

import type {PaletteOption} from '@gravity-ui/uikit';
import {Palette} from '@gravity-ui/uikit';

const options: PaletteOption[] = [
    {content: '😎', value: 'ID-cool'},
    {content: '🥴', value: 'ID-woozy'},
];

const disabledOptions: PaletteOption[] = [{...options[0], disabled: true}, options[1]];

export default function () {
    return (
        <>
            <Palette options={disabledOptions} />
            <Palette options={options} disabled />
        </>
    );
}

Size

Use the size property to manage the Palette size. The default size is s.

import type {PaletteOption} from '@gravity-ui/uikit';
import {Palette} from '@gravity-ui/uikit';


const options: PaletteOption[] = [
    {content: '😎', value: 'ID-cool'},
    {content: '🥴', value: 'ID-woozy'},
];


export default function () {
    return (
        <>
            <Palette options={options} size="xs" />
            <Palette options={options} size="s" />
            <Palette options={options} size="m" />
            <Palette options={options} size="l" />
            <Palette options={options} size="xl" />
        </>
    );
}

import type {PaletteOption} from '@gravity-ui/uikit';
import {Palette} from '@gravity-ui/uikit';

const options: PaletteOption[] = [
    {content: '😎', value: 'ID-cool'},
    {content: '🥴', value: 'ID-woozy'},
];

export default function () {
    return (
        <>
            <Palette options={options} size="xs" />
            <Palette options={options} size="s" />
            <Palette options={options} size="m" />
            <Palette options={options} size="l" />
            <Palette options={options} size="xl" />
        </>
    );
}

Columns

You can change the number of columns in the grid by changing the columns property (the default value is 6).

import type {PaletteOption} from '@gravity-ui/uikit';
import {Palette} from '@gravity-ui/uikit';


const options: PaletteOption[] = [
    {content: '😎', value: 'ID-cool'},
    {content: '🥴', value: 'ID-woozy'},
];


export default function () {
    return <Palette options={options} columns={1} />;
}

import type {PaletteOption} from '@gravity-ui/uikit';
import {Palette} from '@gravity-ui/uikit';

const options: PaletteOption[] = [
    {content: '😎', value: 'ID-cool'},
    {content: '🥴', value: 'ID-woozy'},
];

export default function () {
    return <Palette options={options} columns={1} />;
}

Multiple

By default, you can select and deselect multiple options. In case you only want to make a single option selectable, you can disable the multiple property.

import type {PaletteOption} from '@gravity-ui/uikit';
import {Palette} from '@gravity-ui/uikit';


const options: PaletteOption[] = [
    {content: '😎', value: 'ID-cool'},
    {content: '🥴', value: 'ID-woozy'},
];


export default function () {
    return <Palette options={options} multiple={false} />;
}

import type {PaletteOption} from '@gravity-ui/uikit';
import {Palette} from '@gravity-ui/uikit';

const options: PaletteOption[] = [
    {content: '😎', value: 'ID-cool'},
    {content: '🥴', value: 'ID-woozy'},
];

export default function () {
    return <Palette options={options} multiple={false} />;
}

Properties

PaletteProps:

Name	Description	Type	Default
aria-label	`aria-label` HTML attribute	`string`
aria-labelledby	ID of the visible `Palette` caption element	`string`
className	`class` HTML attribute	`string`
columns	Number of elements per row	`number`	`6`
defaultValue	Sets the initial value state when the component is mounted	`string[]`
disabled	Disables the options	`boolean`	`false`
multiple	Enables selecting multiple options	`boolean`	`true`
onBlur	`onBlur` event handler	`(event: React.FocusEvent<HTMLButtonElement>) => void`
onFocus	`onFocus` event handler	`(event: React.FocusEvent<HTMLButtonElement>) => void`
onUpdate	Fires when the user changes the state Provides the new value as a callback's argument	`(value: string[]) => void`
optionClassName	`class` HTML attribute for the palette button	`string`
options	List of options (palette elements)	`PaletteOption[]`	`[]`
qa	`data-qa` HTML attribute, used for testing	`string`
rowClassName	`class` HTML attribute for a palette row	`string`
size	Sets the size of the elements	`xs` `s` `m` `l` `xl`	`m`
style	`style` HTML attribute	`React.CSSProperties`
value	Current value for the controlled usage of the component	`string[]`

PaletteOption:

Name	Description	Type	Default
content	`class` HTML attribute	`ReactNode`
disabled	Disables the button	`boolean`	`false`
title	`title` HTML attribute	`string`
value	Control value	`string`

Palette

§Disabled state

§Size

§Columns

§Multiple

§Properties

Disabled state

Size

Columns

Multiple

Properties