Button
Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
import * as UI from "@iyk/ui"
export default () => (
<UI.Button2 kind="solid" size="sm">Button</UI.Button2>
)kind
size
- Solid
- Highlights the most important call to action on a page. Use sparingly — only one solid button should appear per area, and not every area requires one.
- Outline
- Serves as a primary button in the interface with reduced visual prominence. Opt for this style when a button needs a moderate level of emphasis.
- Shaded
- Designed for header-level actions within the platform. Use this style to subtly emphasize page-level functionality.
- Ghost
- Indicates less pronounced actions, often paired with a primary button. Ideal for scenarios like modal actions ('Submit' and 'Cancel'), where 'Cancel' is styled as a ghost button.
- Danger
- Used exclusively for actions with potentially danger outcomes, such as deleting or removing user data.
You don’t necessarily need to use the buttons in the order that their labels imply. For example, you don’t always need to use the outline button as the second button in your layout. The most important thing is to establish a visual hierarchy between the buttons in your UI. The only two buttons that we can definitively say we use in certain scenarios are `solid` and `danger`.