Home

Components

Foundations

tiket.design

Home

Components

Foundations

tiket.design

Components

Overview

Accordion

Badge

Button

Bottom Sheet

Banner - Gradients

Banner - Info & Notif

Checkbox

Coachmark

Countdown

Chips

Label

Navigation bottom

Tabs

Textfields

Toolltip

more components
coming up, stay tuned!

components

Overview

Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.

Accordion

Allows content to expand and collapse, optimizing space and enhancing navigation efficiency.

Accordion

Allows content to expand and collapse, optimizing space and enhancing navigation efficiency.

Accordion

Allows content to expand and collapse, optimizing space and enhancing navigation efficiency.

Badge

A visual cue to alerts users to new or updated items with numeric, alphabetic, or dots.

Badge

A visual cue to alerts users to new or updated items with numeric, alphabetic, or dots.

Badge

A visual cue to alerts users to new or updated items with numeric, alphabetic, or dots.

Button

Used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

Button

Used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

Button

Used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

Bottom Sheet

Surfaces containing supplementary content anchored to the screen's bottom.

Bottom Sheet

Surfaces containing supplementary content anchored to the screen's bottom.

Bottom Sheet

Surfaces containing supplementary content anchored to the screen's bottom.

Banner - Gradients

Banners with gradual transition of colors to create depth and visual interest.

Banner - Gradients

Banners with gradual transition of colors to create depth and visual interest.

Banner - Gradients

Banners with gradual transition of colors to create depth and visual interest.

Banner - Notif & Info

Convey important info or notifications at the top of the page to ensure visibility.

Banner - Notif & Info

Convey important info or notifications at the top of the page to ensure visibility.

Banner - Notif & Info

Convey important info or notifications at the top of the page to ensure visibility.

Checkbox

Allows a user to select zero, one, or more options from a set of choices.

Checkbox

Allows a user to select zero, one, or more options from a set of choices.

Checkbox

Allows a user to select zero, one, or more options from a set of choices.

Coachmark

Temporary messages that educate users through new or unfamiliar product experiences.

Coachmark

Temporary messages that educate users through new or unfamiliar product experiences.

Coachmark

Temporary messages that educate users through new or unfamiliar product experiences.

Countdown

A visual cue indicating the duration of time.

Countdown

A visual cue indicating the duration of time.

Countdown

A visual cue indicating the duration of time.

Chips

Allow users to make single & multiple selections, filter content, or trigger actions.

Chips

Allow users to make single & multiple selections, filter content, or trigger actions.

Chips

Allow users to make single & multiple selections, filter content, or trigger actions.

Label

Used to inform users of the status of an object or of an action that’s been taken.

Label

Used to inform users of the status of an object or of an action that’s been taken.

Label

Used to inform users of the status of an object or of an action that’s been taken.

Navigation Bottom

Allow movement between primary destinations in an app.

Navigation Bottom

Allow movement between primary destinations in an app.

Navigation Bottom

Allow movement between primary destinations in an app.

Tabs

For navigate between different, but related content. Tabs are commonly used on tool landing pages and on item detail pages.

Tabs

For navigate between different, but related content. Tabs are commonly used on tool landing pages and on item detail pages.

Tabs

For navigate between different, but related content. Tabs are commonly used on tool landing pages and on item detail pages.

Textfield

Enable user to interact with and input content and data. This component can be used for long and short form entries.

Textfield

Enable user to interact with and input content and data. This component can be used for long and short form entries.

Textfield

Enable user to interact with and input content and data. This component can be used for long and short form entries.

Tooltip

Small in-app messages attached to a specific element or alert about new updates during app usage.

Tooltip

Small in-app messages attached to a specific element or alert about new updates during app usage.

Tooltip

Small in-app messages attached to a specific element or alert about new updates during app usage.

design@tiket.com