Components overview

Components are reusable and interactive building blocks for creating a user interface.

  1. Accordion

    An accordion is an interactive list that shows and hides sections of related content.

  2. Alert

    Critical messages that help provide a course of action to find out more.

  3. Avatar

    A visual identifier that represents profiles, recipients, accounts, cards or businesses.

  4. Badge

    A status descriptor to inform users the number of notifications or updates available.

  5. Button

    A trigger used to take actions and make choices, with a single tap.

  6. Bottom sheet

    Used in mobile design dialog anchored at the bottom of the screen that expands to display supplementary information.

  7. Card

    A container that displays related content and associated actions.

  8. Checkbox

    A checkbox allows the customer to make a binary choice.

  9. Currency pair

    Financial amount with specified currency.

  10. Date picker

    Calendar display that allows users to select a single or a range of dates and times.

  11. Drawer

    A side panel anchored to the right of the screen that provides supplementary content in context of the current page.

  12. Dropdown

    A compact way to display a list of options or actions to select from.

  13. Empty state

    An empty state occurs when a screen is not populated with information yet.

  14. Information banner

    A general message to provide users more context about a service.

  15. Input field

    An input control that enables the user to interact with and input content or data.

  16. List item

    A group of related content grouped together and organised vertically.

  17. Modal

    A dialog window that sits on top of the page content, focusing the user’s attention on a task or decision.

  18. Navbar

    A global navigation element that orients users in the UI and gives them access to application-wide functions.

  19. Popover

    A configurable dialog displaying contextual information or quick access to a service.

  20. Promo banner

    A prominent message offering users relevant insights or services.

  21. Quicklinks

    A dynamic menu giving users quick access to top services relevant to the page.

  22. Radio

    An input control that can only have one selection within a group of radio buttons.

  23. Select

    An input for choosing one or multiple options in a list.

  24. Shimmer

    An animated indicator to show that content on the page is still loading.

  25. Snackbar

    A temporary notification that appears towards the bottom of the page to acknowledge that an action has been performed.

  26. Switch

    A toggle control to switch between two possible states.

  27. Tabs

    Organised groups of content that allow users to navigate easily between views within the same context.

  28. Tags

    Labels that categorise or organise items for quick scanning or to draw a user’s attention.

  29. Tooltip

    A short descriptive message that appears when a user hovers or focuses on an element.

  30. Upload

    An input for choosing one or more files to upload to a specific location.
Loading...