Skip to main content

Chip

The Chip component is a compact, interactive element designed to display information in a concise and visually appealing manner. It is particularly useful for applications that require the representation of small pieces of information, such as tags, categories, or user inputs, in a way that is both clickable and easily recognizable. By using the Chip component, businesses can enhance the user experience by providing a clear and efficient way to manage and interact with discrete data points. The component's design allows for the inclusion of text and an optional icon, making it versatile for various use cases, such as filtering options, displaying selected items, or indicating status.

Properties​

To effectively utilize the Chip component, the following data and attributes are necessary:

  • Component-Level Attributes:
    • Code: A unique identifier for the Chip component, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the component.
  • Visual and Content Attributes:
    • Title: The text displayed within the chip, providing a clear and concise description of the information or action associated with the chip. This text should be brief yet informative, ensuring that users can quickly understand its purpose.
    • Icon: An optional feature that allows the selection of an icon to be displayed alongside the text in the chip. The icon enhances visual appeal and provides an additional layer of context, helping users quickly identify the chip's function or category.

By structuring the Chip component with these attributes, businesses can create a user-friendly interface that effectively communicates information through compact and interactive elements. The ability to customize text and icons ensures that the component remains a powerful tool for enhancing application functionality and user experience.

Style​

Best Practices​

  • Clarity and Purpose: Ensure that each chip clearly conveys its purpose, such as representing a tag, category, or selection. Use concise text or icons to communicate the chip's function effectively.
  • Consistent Styling: Maintain consistent styling for chips across your application to create a cohesive user experience. This includes using the same colors, fonts, and sizes for similar types of chips.
  • Interactivity: If chips are interactive (e.g., selectable or removable), provide clear visual feedback on hover and active states to enhance user engagement.

Highest Value Features​

  • Color Customization: Allow customization of chip colors to match the overall design of the application and enhance brand identity.
  • Size Adjustment: Provide options to adjust the size of chips to ensure they fit well within the layout and are easily clickable on all devices.
  • Icon Integration: Support the inclusion of icons within chips to enhance visual communication and improve user understanding.

All the Settings​

Border​

  • BORDER: Customize the border style, width, and color of the chip to define its outline and separation from other elements. Use the following settings:
    • BORDER OPTIONS:
      • Style: solid, dashed, dotted, etc.
      • Width: specify the thickness of the border in pixels.
      • Color: choose a color using a color picker or HEX, RGBA, HSLA values.

Padding​

  • PADDING: Adjust the padding around the chip to create space between the text/icon and the chip's border. Use the following settings:
    • PADDING OPTIONS:
      • Icon: all padding, top padding, left padding, bottom padding, right padding.
      • Size: in pixels using up and down arrows or by entering a numeric value.

Chip​

  • CHIP FONT: Customize the font of the chip using the following settings:
    • Chip Color: Set the color of the chip
      • Design System: By default this follows the "Accent one" on the active design system.
    • FONT OPTIONS:
      • Design System: By default this follows the "Label small" on the active design system.
      • Alignment: left, center, right, aligned.
      • Font type: choose from available font families.
      • Font-size: number expressed in px, em, or rem (where "em" is relative to the font size of the element itself, and "rem" is relative to the root element's font size).
      • Letter spacing: in pixels.
      • Line height: in pixels.
      • Style: normal, italic, oblique, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Weight: thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
      • Color: picker or values in HEX, RGBA, HSLA.
      • Stretch: Normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
      • Variant: normal, small caps, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Caps variant: normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial (inherits the browser’s default), inherit (inherit from the parent element).

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively. An "em" is relative to the font size of the element itself, while a "rem" is relative to the font size of the root element (usually the <html> element).

This style guide provides a comprehensive overview of the styling options available for the Chip component in NoCode-X, ensuring users can create visually appealing and functional designs.

Actions​

Event: On Click​

  • This action is executed whenever a chip is clicked by the user.
  • It triggers interactions or processes based on the user's click, enabling dynamic responses within the application.

Compatible functions​

  • Set title of chip