DOCSEARCHbyAlgolia
Submit Docs

BEEQ Design System

repository·main·Indexed 41 days ago

https://github.com/endava/beeq

A web component library providing a design system with framework-specific wrappers for Angular, React, and Vue, along with TailwindCSS integration. It includes core components via @beeq/core and specialized packages like @beeq/angular, @beeq/react, @beeq/vue, and @beeq/tailwindcss for styling and integration.

Tokens
267.4K
Snippets
654
Records
1.1K
Agent score
50%

What's inside BEEQ

  1. Overview of BEEQ capabilities

    main

    BEEQ is a web component library initiative maintained by Endava designed to help teams build consistent, accessible digital products. The system provides several core pillars for product development:

    • Design Foundations: Guidance for color, typography, spacing, radius, stroke, shadows, and layout.
    • Reusable Components: Production-ready web components compatible with HTML, React, Angular, Vue, and other modern frontend stacks.
    • Theming and Customization: Support for design tokens, themes, modes, and component-level CSS variables.
    • Accessibility: Integrated accessibility guidance within component APIs and usage patterns.
    • Documentation: Implementation guidance and design perspectives with adaptable examples.

  2. BEEQ Guiding Principles

    main

    BEEQ is built upon eight core principles that guide component behavior and system architecture:

    • User-centric: Decisions are shaped by real user needs and goals.
    • Accessibility: Targets WCAG 2.1 Level AA compliance to ensure inclusivity.
    • Reusability: Components are designed to be shared and adapted across projects.
    • Modularity: Built from small, independent, and loosely coupled pieces.
    • Extensibility: Designed to be extended with custom tokens, brand overrides, and new components.
    • Scalability: Uses token-based theming and web components to scale from small products to multi-brand suites.
    • Consistency: Uses shared language and patterns to reduce cognitive load.
    • Flexibility: Adapts to diverse contexts (B2C/B2B, desktop/mobile, light/dark themes).

  3. Use the bq-side-menu-item component

    main

    The bq-side-menu-item component represents a standard navigation element for side menus. It provides a clean way to display menu options and supports states like active, collapsed, and disabled. When the parent side menu is collapsed, the component utilizes a tooltip to display content.

    <bq-side-menu-item>
  <!-- Default slot for the label content -->
  Menu Label
  
  <span slot="prefix">Icon</span>
  <span slot="suffix">Badge</span>
</bq-side-menu-item>

  6. Use the bq-button component

    main

    The bq-button is a web component designed for user actions. It can function as a standard <button> or as an <a> link if the href property is provided. It supports various appearances, sizes, and loading states.

    <!-- Example of a primary button -->
<bq-button appearance="primary">Click Me</bq-button>

<!-- Example of a link button -->
<bq-button href="https://example.com" appearance="link">Visit Site</bq-button>

  7. Browse BEEQ component library categories

    main

    BEEQ provides a comprehensive set of UI building blocks categorized by their functional role in an interface. You can explore components across the following categories:

    • Actions: Components to trigger flows (e.g., Button, Dropdown).
    • Data Display: Components for presenting information (e.g., Accordion, Avatar, Badge, Icon, Status, Table, Tag).
    • Feedback: Components for communicating state or messages (e.g., Alert, Dialog, Drawer, Empty State, Notification, Progress, Spinner, Toast, Tooltip).
    • Form Controls: Components for user input (e.g., Checkbox, Date Picker, Input, Radio, Select, Slider, Switch, Textarea).
    • Layout: Structural components (e.g., Card, Divider, Page Title).
    • Navigation: Components for movement and hierarchy (e.g., Breadcrumb, Side Menu, Steps, Tab).

    For each component, the documentation provides usage guidance, framework-specific examples (Angular, React, Vue), and a full API reference. For interactive states and visual variants, refer to the BEEQ Storybook.

  10. Use the bq-switch component

    main

    The bq-switch is a digital on/off toggle switch component. It can be used as a standard form control or customized with icons and specific layouts.

    Key features include:

    • Support for form validation via required and form-validation-message.
    • Custom inner labels using icons.
    • Flexible layout control via justify-content and reverse-order.
    • Integration with native form submission using name and value properties.