Blank Slate
The Blank Slate component is a versatile and informative element designed to provide users with contextual information or guidance when a particular section of the interface is empty or lacks content. It integrates seamlessly into your application, offering a clear and engaging way to communicate with users.
Basic usage
The Blank Slate component is a customizable element that can include an illustration, a title, and additional content to guide users. It follows the Docebo Design System guidelines to ensure consistency and accessibility.
Illustration
The Blank Slate component supports an illustration to visually enhance the message. The illustration can be specified using the illustrationSvgName input, which accepts the name of the SVG to be displayed.
Size
The size of the illustration can be controlled using the illustrationSize input. The available sizes are defined in the LG.
Title
The title of the Blank Slate component can be assigned an ARIA level for accessibility purposes using the titleAttrAriaLevel input. This input accepts values from the LEVEL_3.
The title content itself should be placed within the < element, which is a child of the
Description
The description of the Blank Slate component provides additional context or instructions to the user. It should be placed within the < element, which is also a child of the
Negative State
The Blank Slate component can be displayed in a negative state by setting the negative input to true. This state is useful for indicating error or warning messages. The negative state can be controlled using the negative input, which is a boolean value.
Accessibility
The Blank Slate component is designed with accessibility in mind. Follow these guidelines to ensure your implementation meets accessibility standards:
Keyboard accessibility
Ensure that the Blank Slate component remains focusable and provides a visible focus ring to help keyboard users navigate the interface.
Roles and states
The component should use appropriate ARIA roles and states to communicate its purpose and status to screen readers. For example, use aria-labelledby and aria-describedby to provide context for the illustration and title.
Contrast and readability
Verify that the contrast ratio meets WCAG guidelines to ensure readability for users with visual impairments.
Alternative text
Provide alternative text for the illustration using the illustrationSvgName input to ensure that screen readers can describe the visual content.
Error prevention for critical actions
If the Blank Slate component is used to indicate critical actions or errors, consider adding a confirmation step to prevent accidental interactions.