PromptBase
$3.99
After purchasing, you will gain access to the prompt file which you can use with GPT or the app builder. You'll receive 20 free generation credits with this purchase. By purchasing this prompt, you agree to our terms of service.
Over 1 month ago
Prompt Details
Model
Chat - GPT-4 (gpt-4)
Token size
162 ($0.00490 / call)
Example input
documentation for the Button component.
Example output
Button Component Documentation
Overview (H1)
The button component is a crucial and versatile element of our design system. It allows users to interact with our product by performing actions or navigating to different pages. Buttons are typically used to submit forms, trigger actions, and initiate navigation.
This documentation will cover the button's usage, anatomy, variants, sizes, and some best practices on using and implementing the button component.
Usage (H1)
When to Use (H2)
Use buttons for primary and secondary actions within the product interface.
Use buttons for form submission or navigation between screens.
Use buttons to trigger actions or processes that require user interaction.
When Not to Use (H2)
Do not use buttons as mere visual elements; they should always perform a specific action or task.
Avoid using buttons when a simple text link or other UI components can perform the same action more efficiently.
Anatomy (H1)
Structure (H2)
The button component consists of the following parts:
Container: The background shape that holds the button's text and icon.
Text: The primary button label that describes the action it performs.
Icon (optional): An optional icon that can appear on the left side of the text to visually represent the action.
Properties (H2)
Background color: Dark green
Text color: White
Variants (H1)
Text-only Button (H2)
Use the text-only button when the text label clearly communicates the action the button will perform.
This variant is ideal for situations where simplicity is needed or space is limited.
Icon and Text Button (H2)
Use the icon and text button when an icon is needed to provide additional context for the button's action or to improve user understanding.
The icon should always appear on the left side of the text.
Sizes (H1)
Small (S) - 40px height (H2)
Use the small button size when it is placed within compact spaces or when used alongside other small UI elements.
Small buttons are recommended for less critical or less frequently used actions.
Large (L) - 48px height (H2)
Use the large button size when it is the primary call-to-action or when placed alongside other large UI elements.
Large buttons are recommended for critical or frequently used actions.
Do and Don't (H1)
Do (H2)
Ensure the text label is concise, clear, and descriptive.
Use the appropriate button size and variant depending on the context.
Ensure there is enough contrast between the button's background and text color to make it easily readable.
Don't (H2)
Do not use icons that are irrelevant or confusing; they should always enhance the user's understanding of the button's action.
Avoid using the button component for purely decorative purposes or when a text link or other UI element is more suitable.
Do not place the icon on the right side of the text; it should always appear on the left side.