DOCSEARCHbyAlgolia
Submit Docs

Persona Design System

website·Indexed 29 days ago

https://privy-open-source.github.io/design-system/

A comprehensive design system and component library featuring Vue-based components such as Buttons, Dropdowns, Inputs, and Wizards. It includes a style guide for typography, colors, and layout, along with an ecosystem of official packages like @privyid/persona for service discovery, logging, and tracing.

Tokens
89.4K
Snippets
594
Records
679
Agent score
72%

What's inside Persona

  1. Use the Badge component for quantification labels

    The <p-badge> component is used to display a label quantifying an item, such as the number of notifications or documents received. It accepts a default slot for the content to be displayed inside the badge.
    <template>
  <!-- Simple text badge -->
  <p-badge>25</p-badge>
  
  <!-- Badge with icon and text -->
  <p-badge>
    <pi-signature-16 />
    <span>2</span>
  </p-badge>
</template>

  3. Use the Label component for status and state

    The <p-label> component is used to display the status or state of an object. By default, the label color is black. It supports plain text or combined content (e.g., text with an icon).
    <template>
  <p-label>Label</p-label>
  <p-label>
    <span>Label</span>
    <pi-checkmark-circle-solid-16 />
  </p-label>
</template>

  4. Use the p-text component for typography

    The p-text component is used for rendering freetext with various typography styles. By default, it renders as body text using a <span> element.
    <template>
  <p-text>The quick brown fox jumps over the lazy dog.</p-text>
</template>

  5. Privy Design System Icon Updates (v1.0.0-rc.1 to v1.0.0-rc.4)

    The Privy design system icons underwent significant additions and modifications during the 1.0.0 release candidate phase. Key changes include the introduction of document-related icons, user-state icons, and various size-specific variants (e.g., /16, /20, /24, /32).

  6. Best practices for implementing Dropdown Menus

    Follow these guidelines when designing and implementing dropdown menus:

    Do:

    • Use dropdowns for navigation or commands typically containing 5-15 items.
    • Sort items logically, placing the most frequently selected options at the top.
    • Use for "more" menus (triggered by an icon) or user profiles (triggered by an avatar).
    • Use in conjunction with dedicated dropdown item and dropdown group components.

    Don't:

    • Do not hide primary actions in a dropdown; primary actions should be visible by default.
    • Do not use a dropdown menu for simple option selection from a list; use the Select component instead.
    • Do not nest elements other than dropdown item and dropdown group components. For complex custom UI, use the Popout component.

  7. Bind values in Range mode

    There are two ways to handle data binding when range is enabled:

    1. Basic v-model: The value is a tuple of Dates: [start, end].
    2. Specific bindings: Use v-model:start and v-model:end to bind the start and end dates to separate variables.
    <!-- Option 1: Tuple binding -->
<p-calendar v-model="rangeValue" range />

<!-- Option 2: Separate bindings -->
<p-calendar
  v-model:start="startDate"
  v-model:end="endDate"
  range />

  8. Implement Button Groups for similar actions

    Use a Button Group to display multiple buttons together when providing user access to similar or frequently performed actions. Depending on the visual hierarchy needed, use the following styles:

    • Default button: Used for the most important actions in an experience to provide high visual highlight.
    • Outline button: Used when an action requires less visual weight.

  9. Use the p-badge component for quantifying labels

    The p-badge component is used to display a label for quantifying items, such as the number of notifications or documents received. By default, the badge color is black.
    <template>
  <!-- Simple numeric badge -->
  <p-badge>25</p-badge>
  
  <!-- Badge with an icon and text -->
  <p-badge>
    <pi-signature-16 />
    <span>2</span>
  </p-badge>
</template>

  10. Block user interaction using the Overlay component

    The Overlay component is used to prevent users from interacting with the UI while a loading process is in progress. It is managed via two imperative functions: showOverlay to display the block and hideOverlay to remove it.
    import { showOverlay, hideOverlay } from '@privyid/persona/core'

function onClick () {
  // Display the overlay to block interaction
  showOverlay()

  // Hide the overlay after a task completes (e.g., 3 seconds)
  setTimeout(() => {
    hideOverlay()
  }, 3000)
}

  12. Implement Toggle component for binary state switching

    Use a Toggle component to allow users to switch between enabled (on) and disabled (off) states for a specific feature or option. Toggles are intended for actions that take effect instantly without requiring a 'Save' or 'Apply' button.