IAlertProps

closable

boolean

description

string

An Icon component from `@olist/design-system-icons` to be used in the
alert.

icon

ReactNode

OnClose function is called after pressing the close button

onClose

() => void

showIcon

title

variation

"neutral_1" | "neutral" | "primary_1" | "primary" | "info" | "success_1" | "success" | "alert_2" | "alert" | "error"

visible

IBadgeProps

An Icon component from `@olist/design-system-icons` to be used in the
badge. Can not be used with `children` prop

ElementType<any>

"neutral" | "primary" | "info" | "success" | "alert" | "error"

IBadgeNotificationProps

countNotifications

number

"neutral" | "primary" | "info" | "alert" | "notice" | "accent"

IBreadcrumbProps

Aria label for the contraction button element.

contractionButtonAriaLabel

items

IBreadcrumbItem[]

rootElement

IBreadcrumbItem

IButtonProps

disabled

Button style to occupy full width of the container

fixed

Use this prop to transform the button element to an anchor

href

An Icon component from `@olist/design-system-icons` to be used in the
button. Can not be used with `children` prop

An Icon component from `@olist/design-system-icons` to be used in the left
side of the button

iconLeft

An Icon component from `@olist/design-system-icons` to be used in the right
side of the button

iconRight

isLoading

onClick

(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void

size

"small" | "medium"

The target attribute specifies where to open the linked document.

target

"_blank" | "_self" | "_parent" | "_top"

"primary" | "accent" | "secondary" | "danger"

IButtonIconProps

An Icon component from `@olist/design-system-icons` to be used in the
button

"primary" | "secondary" | "primary_2" | "secondary_1"

ICardProps

borderColor

"neutral" | "primary" | "success" | "alert" | "notice" | "accent" | "informative"

Choose the colored border direction, must be used within `borderColor` prop

borderDirection

"left" | "bottom"

Choose if card is in column or row direction

direction

"row" | "column"

Renders an anchor tag with an href attribute

maxWidth

Specifies where to open the linked document

Display a colored card based on the value of this prop

ICheckboxProps

checked

error

errorMessage

indeterminate

label

readOnly

ICollapse

A function child can be used instead of a React element.
This function is called with the current transition status
('entering', 'entered', 'exiting', 'exited'),
which can be used to apply context specific props to a component.

children

Show the component; triggers the enter or exit states

open

The duration of the transition, in milliseconds.

timeout

By default the child component stays mounted after it reaches the 'exited' state.
Set unmountOnExit if you'd prefer to unmount the component after it finishes exiting.

unmountOnExit

ICopyButton

tooltipText

valueToCopy

IDatePicker

clearLabel

defaultValues

{ startDate: Date; endDate: Date; }

endDateLabel

If DatePicker is rendered inside another container

inContainer

maxBookingDays

minBookingDate

Date

onChange

(data: any) => void

onClear

shouldResetOnSubmit

showSubmitButton

singleDate

startDateLabel

submit

(startDate: Date, endDate: Date) => void

submitLabel

values

IDescriptionItem

align

"center" | "left" | "right"

content

IDrawerHeaderProps

IDrawerBodyProps

IDrawerProps

closeDrawer

isOpen

width

string | number

wrapperZIndex

IDropdownProps

Ref to the anchor element that dropdown will use to define it's position

anchorElement

RefObject<HTMLElement>

An element id to append dropdown to a different container element

appendTo

"left" | "bottom" | "right" | "top"

Set which elements will be used to trap focus
it will use dropdown container as default

focusTrapContainerElements

HTMLElement[]

Controls if dropdown needs to be displayed

Set this to false if you don't want to return focus to previous element

returnFocusToPreviousElement

IEmojiProps

symbol

IFileUploader

accept

dropzoneSubtitle

dropzoneTitle

maxSize

maxSizeErrorMsg

multiple

(files: any) => void

uploadButtonIcon

FC<SVGProps<SVGSVGElement>>

uploadButtonTitle

uploadWithButton

IFilterBadgeProps

Event fired when user clicks on close button

selected

Indicates if the selected icon is displayed.

IGridItem

alignItems

AlignItems

justifyContent

JustifyContent

large

OneTwelve

large-offset

medium

medium-offset

small

OneEight

small-offset

xlarge

xlarge-offset

xsmall

OneFour

xsmall-offset

IInputProps

feedback

"" | "error" | "valid"

helperText

Adds a rotating loading indicator on the right.

optionalLabel

Popover component configuration shown next to the input label.
Allows adding contextual information via tooltip-like interaction.

Accepts an object with Popover properties such as:
- `content`: the text or node shown inside the popover.
- `placement`: the position of the popover relative to the icon (e.g. "top", "right").
- `variation`: visual style of the popover ("neutral", "info", etc).
- `width`: custom width for the popover content.
- `overline`: optional overline text above the content.
- `icon`: optional React component to be rendered as the trigger (defaults to `AlertCircleOutline` if not provided).

popoverInfo

PopoverInfoProps

Input prefix, a string or a component to be used as a prefix

prefix

string | ComponentClass<any, any> | FunctionComponent<any>

showFeedbackIcon

Input suffix, a string or a component to be used as a suffix

suffix

string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | ComponentClass<...> | FunctionComponent<...>

IInputSearchProps

Display a button with the ctaButtonText text.

ctaButton

Text to display in the button when ctaButton is true.

ctaButtonText

ctaButtonVariation

Delay in milliseconds to wait before calling the onSearch callback.

debounceDelay

Callback function that will be called when the user types in the
search input.

ChangeEventHandler<HTMLInputElement>

Callback function that will be called when the user clicks on the
clean button. (X button)

onClean

Callback function that will be called after the debounce delay
when the user types in the search input or when the user clicks
on the cta button.

onSearch

(searchedValue: string) => void

placeholder

value

property	description	required	default value	type
currentStep	The current step of the progress circle.	`true`	`undefined`	`number`
totalSteps	The total number of steps in the progress cicle.	`true`	`undefined`	`number`
variation	The variation of the progress circle.	`false`	`primary`	`neutralprimaryinfosuccessnoticedanger`
label	The label to display above the progress circle.	`false`	`undefined`	`string`
counterClockwise	Change the direction of the progress circle.	`false`	`false`	`boolean`
size	The size of the progress circle.	`false`	`medium`	`smallmediumlarge`

progresscircle

índice

demo interativa

propriedades*

propriedades para estilização (styled props)

guia de design

Migração do United para Olist Design System

Propriedades

Variações Existentes

United	Olist Design System
counterClockwise	counterClockwise
current	currentStep
label	label
size	size
total	totalSteps
variation	variation

United	Olist Design System
primary	primary
danger	danger
alternate	success
accent	info
warning	notice
❌	neutral