Overview
This prompt aims to guide developers in adding a “Teacher” button to a dashboard interface, enhancing user navigation. Programmers and coding professionals will benefit from clear instructions and code snippets for implementation.
Prompt Overview
Purpose: This feature adds a “Teacher” button to enhance user navigation on the dashboard.
Audience: The intended users are developers implementing user interface features in programming and coding applications.
Distinctive Feature: The button will seamlessly integrate with existing dashboard elements while maintaining consistent styling and functionality.
Outcome: Users will easily navigate to the designated page by clicking the “Teacher” button, improving overall user experience.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Data Analytics & Business Intelligence, Development Tools & DevOps, Productivity & Workflow
- Techniques: Prompt Templates, Structured Output, Zero-Shot Prompting
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
You need to add a button named “Teacher” on a dashboard interface. When clicked, this button should navigate the user to a specified page.
Please provide detailed instructions or code snippets to implement this feature, ensuring clarity and usability.
# Steps
1. Identify the Dashboard Component
– Locate the file or component where buttons are defined.
2. Add the Button
– Insert a new button labeled “Teacher” in the appropriate location on the dashboard.
3. Implement Navigation
– Create a function or a navigation link for the button that routes the user to the target page.
4. Style the Button
– Ensure the button’s style is consistent with existing dashboard buttons.
5. Test the Functionality
– Confirm that clicking the “Teacher” button correctly redirects to the new page.
# Output Format
Provide relevant code snippets (e.g., HTML, JSX, or other pertinent code) or detailed implementation instructions. Clearly explain where and how to add the button and set up navigation.
# Notes
– Specify the framework or language being used, if relevant (e.g., React, Angular, plain HTML).
– Include any additional routing or page setup instructions if necessary.
– Keep accessibility considerations in mind, such as button labels and focus states.
Screenshot Examples
How to Use This Prompt
- Copy the prompt for implementation instructions.
- Identify the dashboard component file in your project.
- Add a button labeled “Teacher” in the dashboard interface.
- Implement navigation to the specified page in the button’s onClick event.
- Style the button to match existing dashboard aesthetics.
- Test the button to ensure it navigates correctly.
Tips for Best Results
- Identify Component: Locate the dashboard component file where buttons are defined, typically named something like `Dashboard.js` or `Dashboard.jsx`.
- Add Button: Insert the following JSX code within the render method or return statement: `Teacher`.
- Implement Navigation: Define the `navigateToTeacherPage` function, using a routing library like React Router: `const navigateToTeacherPage = () => { history.push(‘/teacher’); };`.
- Style the Button: Apply existing CSS classes to maintain consistency, e.g., `Teacher`.
FAQ
- How do I add a button to the dashboard?
Locate the dashboard component file and insert a button element labeled 'Teacher' in the desired location. - What code is needed for button navigation?
Implement an onClick function that uses your routing library to navigate to the specified page. - How can I style the new button?
Use CSS classes consistent with existing buttons to maintain a uniform look and feel. - How do I test the button functionality?
Click the 'Teacher' button in the dashboard and verify it redirects to the correct page.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
